Question

我要这样做的是：我有多个子组件，当我单击详细信息时，我想在其他子组件中隐藏相同的div

例如当我单击div 1关闭2和3等等

<div onClick="showDetails()">component 1</div>
<div onClick="showDetails()">component 2</div>
<div onClick="showDetails()">component 3</div>
<details></details>

我尝试使用ref，但是ref无效，它仅关闭了第一个组件div。

 export default class Parent extends Component {

                  constructor(props) {
                    super(props)
                    this.myRef = React.createRef();         
                    this.handleActivity = this.handleActivity.bind(this)
                  }
                 handleActivity() {
                    //call to a method in Child component 
                    this.myRef.current.closeAll()
                 }

                  render() {
                    return (
                      <div>
                            <Child ref={this.myRef} closeAllOather={this.handleActivity} />
                            <Child ref={this.myRef} closeAllOather={this.handleActivity} />
                            <Child ref={this.myRef} closeAllOather={this.handleActivity} />
                            <Child ref={this.myRef} closeAllOather={this.handleActivity} />
                      </div>
                    )
                  }
                }

    export default class Child extends Component {
      constructor(props) {
        super(props)

        this.state = {
          show: false,
        }

        this.show = this.show.bind(this)
        this.hide = this.hide.bind(this)
      }

      closeAll(){
        this.setState({show: false})
           }

       show() {

        this.props.closeAllOather()
        this.setState({ show: true })
      }
      hide() {
        this.setState({ show: false })
      }

      render() {
        return (
          <div>
            <div onClick={this.show} />
            <div style={this.state.show ? visible : hidden}>
              <div style={detailBlock}>
                <span style={{ float: 'right' }} onClick={this.hide}>
                  close
                </span>

                {this.props.text}
                <br />
              </div>
            </div>
          </div>
        )
      }
    }

关于如何做到这一点的任何建议？

Answer 1

我将currentElement保留在Parent中，并在Child中进行验证，以确保其处于活动状态。

示例：

class Parent extends React.Component {

  constructor(props) {
    super(props)

        this.state = {
      activeElement: null
    };

    this.onChildClick = this.onChildClick.bind(this)
  }

  onChildClick(e) {
    this.setState({activeElement: e.currentTarget});
  }

  render() {
    return (
      <div>
        <Child onClick={this.onChildClick} activeElement={this.state.activeElement} />
        <Child onClick={this.onChildClick} activeElement={this.state.activeElement} />
        <Child onClick={this.onChildClick} activeElement={this.state.activeElement} />
        <Child onClick={this.onChildClick} activeElement={this.state.activeElement} />
      </div>
    )
  }
}

class Child extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  render() {
    const isActive = this.myRef.current && this.myRef.current === this.props.activeElement;

    return (
      <div ref={this.myRef} style={{color: isActive ? 'red' : 'black'}} onClick={this.props.onClick}>Child</div>
    )
  }
}

https://jsfiddle.net/n7y9buqg/5/

Answer 2

将父级中的handleActivity更改为

 handleActivity(id) {
                    this.setState({
                       selectedChild:id
                    });
                 }

和父级中的渲染

render() {
                    return (
                      <div>
                            <Child isSelected={this.state.selectedChild === 1 ? "true":"false"} ref={this.myRef} closeAllOather={this.handleActivity(1)} />
                            <Child isSelected={this.state.selectedChild === 2 ? "true":"false"} ref={this.myRef} closeAllOather={this.handleActivity(2)} />
                            <Child ref={this.myRef} isSelected={this.state.selectedChild === 3 ? "true":"false"} closeAllOather={this.handleActivity(3)} />
                            <Child ref={this.myRef} isSelected={this.state.selectedChild === 4 ? "true":"false"} closeAllOather={this.handleActivity(4)} />
                      </div>
                    )
          }

最后在孩子身上做

render() {
        return (
          <div>
            <div onClick={this.show} />
            <div style={this.state.show ? visible : hidden}>
              <div style={this.props.isSelected === "true" ? detailBlock:{display: "none"}}>
                <span style={{ float: 'right' }} onClick={this.hide}>
                  close
                </span>

                {this.props.text}
                <br />
              </div>
            </div>
          </div>
        )
      }

在所有子组件中关闭div

2 个答案: