React 处理组件之间的交互状态

IT技术 javascript reactjs
2021-05-01 17:29:14

我有一个显示元素 onClick 的简单组件：

    class MyComponent extends React.Component {

       state = {
        isVisible : false
       }

     render() {
      const { isVisble } = this.state
      return(
      <div>
       {isVisble ? 
        <div onClick={() => this.setState({isVisble: false})}>Hide</div> : 
        <div onClick={() => this.setState({isVisble: true})}>Show</div>}
      </div>
     )
    }
}

我在其他组件中使用了这个组件三次：

class MySuperComponent extends React.Component {     
 render() {
  return(
  <div>
   <MyComponent /> 
   <MyComponent /> 
   <MyComponent /> 
  </div>
  )}
}

如果其中一个将 isVisible 设置为 true，我需要将所有其他组件的 isVisible 设置为 false

怎么做 ？

谢谢

2个回答

您应该控制您的组件，因此将isVisble移动到 props，然后从 MySuperComponent 分配它。

还向 MyComponent 传递一个回调，以便它可以通知父级是否要更改状态。

您需要一些数据结构来存储这些状态。

https://codepen.io/mazhuravlev/pen/qxRGzE

class MySuperComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {children: [true, true, true]};
        this.toggle = this.toggle.bind(this);
    }

    render() {
        return (
            <div>
                {this.state.children.map((v, i) => <MyComponent visible={v} toggle={() => this.toggle(i)}/>)}
            </div>
        )
    }

    toggle(index) {
        this.setState({children: this.state.children.map((v, i) => i !== index)});
    }
}

class MyComponent extends React.Component {
    render() {
        const text = this.props.visible ? 'visible' : 'hidden';
        return (<div onClick={this.props.toggle}>{text}</div>);
    }
}


React.render(<MySuperComponent/>, document.getElementById('app'));

你可以在这里检查你的代码，这是你想要的。 例子

其它你可能感兴趣的问题
上一篇需要在不使用 onChange 回调的情况下获取下拉菜单的值 - (material-ui reactjs) 下一篇react热重载不适用于 webpack 4