javascript - 从另一个组件事件中隐藏组件 - React

Question

我有一个绑定组件列表的代码，称为 Call

调用组件：

class Call extends React.Component {
    constructor(props) {
        super(props);
       this.state = {options_show:false};
       this.showOptionts = this.showOptionts.bind(this);
      }

    showOptionts(){
    this.setState(prevState => ({
        options_show: !prevState.options_show
      }));
    }

    render() {
      return (
        <div className="call">     
          <div className="number">Phone: {this.props.number}</div>
          <div onClick={this.showOptionts}>MORE</div>
          <CallOptions show={this.state.options_show} phone={this.props.number}/>
        </div>
          );
    }
  }

调用组件具有将showOptionts()状态更改 options_show为真或假的功能。虽然options_show是真的，但<CallOptions/>是显示的。

<div onClick={this.showOptionts}>MORE</div>触发showOptionts()功能。

CallOptions 组件代码：

  class CallOptions extends React.Component {
    render() {
        const show = this.props.show;
        if(show){
        return ( 
          <div className="options">     
          <div>Send WhatsApp</div>
          <div>Demo Button</div>
          <div>One More Demo Button</div>
          </div>
            );
        }
        else return null;
      }
  }

代码工作正常，但我希望特定 CallOptions 组件在用户单击窗口或单击另一个调用组件时隐藏<div onClick={this.showOptionts}>MORE</div>

我该怎么做？

完整代码：

class Call extends React.Component {
    constructor(props) {
        super(props);
       this.state = {options_show:false};
       this.showOptionts = this.showOptionts.bind(this);
      }

    showOptionts(){
    this.setState(prevState => ({
        options_show: !prevState.options_show
      }));
    }

    render() {
      return (
        <div className="call">     
          <div className="number">Phone: {this.props.number}</div>
          <div onClick={this.showOptionts}>MORE</div>
          <CallOptions show={this.state.options_show} phone={this.props.number}/>
        </div>
          );
    }
  }


  class CallOptions extends React.Component {
    render() {
        const show = this.props.show;
        if(show){
        return ( 
          <div className="options">     
          <div>Send WhatsApp</div>
          <div>Demo Button</div>
          <div>One More Demo Button</div>
          </div>
            );
        }
        else return null;
      }
  }


ReactDOM.render(
  <div>
    <Call number="006-665-65456"/>
    <Call number="018-665-22456"/>
    <Call number="019-995-61256"/>
  </div>,
    document.getElementById('root'));

body{  margin:0;padding:0;}

.call {
    display: grid;
    grid-template-columns: 80% 20%;
    margin-bottom: 20vh;
    padding:10px;
    background-color: rgb(238, 238, 238);
    box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.1), 0 4px 8px 0 rgba(255, 255, 255, 1);
    height:9.4vh;
  }

.call .number {font-size: 20px; margin:0; font-weight: 600;display: block; color: black; text-decoration: none;}

.options {
    background-color: rgb(255, 255, 255);
    position: relative;
    top:-2vh;
    left:45%;
    width: 130px;
    padding:15px;
    z-index: 1;
    border-radius: 6px;   
    box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.1), 0 4px 8px 0 rgba(255, 255, 255, 1);
    font-size:12px;
}

.options div{
    padding: 1vh;
}

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

标签： javascripthtmlcssreactjs