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()
    }

如何在React js中设置子组件的父组件状态

1 个答案: