如何在React JS中從子組件設置父組件的狀態

Question

 how do i  change the state of parent in child component
I'm trying to create a popover in react 

Parent component

    class App extends Component {
      constructor(props) {
        super(props);
        this.state = {
          status: false,
          anchorEl: null
        };
      }

      showpop = () => {


        this.setState({ status: !this.state.status });
      };


    render() {
        return (

            <React.Fragment>
              <p id="popup" onClick={this.showpop}>
                Click me
              </p>
              {this.state.status ? (
                <Popup status={this.state.status}>test</Popup>
              ) : (
                ""
              )}
            </React.Fragment>
        );
      }
    }

我只是將狀態傳遞給了popover組件。 這是子組件

export default class popup extends Component {
  constructor(props) {
    super(props);
    this.state = {
      popupStatus: false
    };
  }

  componentWillMount() {
    document.addEventListener("click", this.handleclick, false);
  }
  componentWillUnmount() {
    document.removeEventListener("click", this.handleclick, false);
  }


  handleclick = e => {
    if (this.node.contains(e.target)) {
      return;
    } else {

//在這里做什么？

    }
  };

  render() {
    return (
      <React.Fragment>
        <Mainbox
          status={this.props.status}
          ref={node => {
            this.node = node;
          }}
        >
          {this.props.children}
        </Mainbox>
      </React.Fragment>
    );
  }
}

在handleclick函數else部分中，我嘗試了這些操作，將節點樣式顯示更改為無，但在窗口中需要單擊兩次以顯示彈出窗口

您可以看到子項中的Mainbox組件是使用樣式組件庫創建的

有什么辦法隱藏要素並更改父狀態？

Answer 1

您可以將方法引用傳遞給child：

<Popup status={this.state.status} showpop={this.showpop}>test</Popup>

  handleclick = e => {
    if (this.node.contains(e.target)) {
      return;
    } else {
      this.props.showpop()
    }