使用props在Reactjs中将值从父级传递给子级

Question

每当我单击send questions按钮时，我都试图将theExpert.email值传递给另一个子组件。

这是Parent类的构造函数

constructor() {
        super();
        this.state = {
         textbox: '',
         category: '',
         exp: '',
         hide: false
        };
        this.hideButton = this.hideButton.bind(this);
}

后续的函数隐藏一旦点击该按钮并保存的值theExpert.email在exp （ value由于传递正确console.log打印出来）

hideButton (value) {
    this.setState({ hide: true });
    this.setState({
      exp: value
    });
    console.log(value)
}

这是按钮，一旦我单击它，它将值传递给hideButton

<div>
  {!this.state.hide ? (
    <button onClick={() => this.hideButton(theExpert.email)}>Ask Me!</button>
  ) : null}  
</div>

现在，我要做的就是单击“ Send Questions按钮后，我将重定向到子组件Questions.js ，并将theExpert.email的值theExpert.email给该组件。按钮“ Send Questions ：

 <div>
        <p>
  {(this.state.hide) && (
    <Link to="/questions">
      <button 
        style={{ background: "green", color: "white" }} 
      >
        Send Question
      </button>
    </Link>
  )}
</p>

            </div>

我如何在子类中检索value以使用它创建发布请求

Answer 1

我认为我们由于懒惰而引起的问题。 基本上，您只是将hide设置为true并重新渲染组件及其所有子组件，但从未设置exp的期望值。

所以代替

hideButton (value) {
    this.setState({ hide: true });
    this.setState({
      exp: value
    });
    console.log(value)
}

尝试

hideButton (value) {
    this.setState(prevState=>{ 
    prevState= {
      ...prevState
      hide: true ,
      exp: value
    }
    return prevState
    });
}