使用props在Reactjs中将值传递给Parent

问题描述 投票:0回答:1

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

这是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的值传递给该组件按钮Send Questions

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

            </div>

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

javascript reactjs parent-child react-props
1个回答
0
投票

我认为我们的问题是由于反应迟钝。基本上你只是将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
    });
}
© www.soinside.com 2019 - 2024. All rights reserved.