代码之家  ›  专栏  ›  技术社区  ›  MD.ALIMUL Alrazy

在反应中没有表现出个体的状态吗?

  •  -1
  • MD.ALIMUL Alrazy  · 技术社区  · 6 年前

    显示相同的状态,但我希望显示单个状态。当我单击医院时,它不显示医院组件,但显示两个医院,消防服务显示相同的状态。单击功能工作,但不显示单个组件,仅显示相同的组件

    import React, { Component } from 'react';
    import './importantplaces.css';
    import Showhospital from './Hospitallist/Showhospital';
    import Showfireservice from './Fireservice/Showfireservice';
    
    export default class Importantplaces extends Component {
        constructor() {
            super();
            this.state = {
                showHospital: false,
                showFire: false
            }
        }
        onClick(e) {
            e.preventDefault();
            this.setState({ showHospital: !this.state.showHospital })
            this.setState({ showFire: !this.state.showFire })
    
        }
        render() {
            return (
                <div className="Importantplaces">
                <div className="placelist">
                <div className="container-fluid">
                <div className="row">
                        <div className="col-md-6">
                            <a onClick={this.onClick.bind(this)} className="place-content p-btn mb-70">Hospital</a>
                            <a onClick={this.onClick.bind(this)} className="place-content p-btn mb-70">Fire Service</a>
                        </div>
                        <div className="col-md-6">
    
                            <a onClick={this.onClick.bind(this)} className="place-content p-btn mb-70">Police Station</a>
                            <a onClick={this.onClick.bind(this)} className="place-content p-btn mb-70">Post Office</a>
                        </div>
                </div>
                </div>
                </div>
                {this.state.showHospital && <Showhospital />}
                {this.state.showFire && <Showfireservice />}
                </div>
    
            );
        }
    }
    
    2 回复  |  直到 6 年前
        1
  •  0
  •   Ivo    6 年前

    您有不同的方法来解决这个问题:向onclick函数添加一个参数来定义哪个状态应该变为true,或者为要显示的每个组件生成不同的onclick函数。第二种解决方案如下:

    <a onClick={this.onHospitalClick.bind(this)} className="place-content p-btn mb-70">Hospital</a>
    <a onClick={this.onFireServiceClick.bind(this)} className="place-content p-btn mb-70">Fire Service</a>
    

    onHospitalClick(e) {
        e.preventDefault();
        this.setState({ showHospital: true, showFire : false })
    }
    
    onFireServiceClick(e) {
        e.preventDefault();
        this.setState({ showHospital: false, showFire : true })
    }
    
        2
  •  2
  •   Thilina Sampath Alexander    6 年前

    请检查下面的代码你可以用一个函数来点击

    class B extends React.Component {
       render(){
        return(
        <div>
          <h1>BBBB</h1>
        </div>
        );
      }
    }
    
    class C extends React.Component {
       render(){
        return(
        <div>
          <h1>CCCC</h1>
        </div>
        );
      }
    }
    
    class A extends React.Component {
    
      constructor() {
        super();
        this.state = {
          showB: false,
          showC: false,
        }
        
        this.handleMultiSelect = this.handleMultiSelect.bind(this);
      }
    
      handleMultiSelect(val) {
        console.log('aaaa', val);
        if(val === 'b'){
          this.setState({
            showB: !this.state.showB
          });
        } else if(val === 'c'){
          this.setState({
            showC: !this.state.showC
          });
        }
      }
    
      render() {
        return (
        <div>
          <a onClick={() => {this.handleMultiSelect('b')}}>B</a>
          <br />
          <a onClick={() => {this.handleMultiSelect('c')}}>C</a>
          {this.state.showB && <B/>}
          {this.state.showC && <C/>}
          </div>
        );
      }
    }
    
    ReactDOM.render( < A / > , document.getElementById('root'));
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
    <div id='root'></div>