通过另一个组件中的状态反应输入值

Question

我正在构建食谱应用程序。目前我有一个弹出框，当你想添加一个配方。在这个弹出窗口中，我希望在确认要添加配方时存储输入。我研究了值事件目标方法，但是我相信我很难让它工作，因为这个弹出框的状态是通过更高层的组件（主应用程序组件）访问的。

GitHub的链接：https://github.com/jeffm64/recipe-box2/tree/master/src/components

这是我现在必须尝试使它工作，但这会导致弹出框不再来了。这是handleChange沿着主应用程序组件的状态：

getInitialState: function() { 
     return { 
      recipes: [], 
      addRecipeVisibility: false, 
      editRecipeVisibility: false, 
      value: "" 
     }; 
}, 

handleChange: function(event) { 
     this.setState({value: event.target.value}); 
}, 

这是弹出框的输入JSX：

<input type="text" value={this.state.value} onChange={this.props.handleChange} /> 

Answer 1

我不知道如果我正确地得到了你的问题，但我会尝试给你一个答案。

您试图将当前组件的状态传递给输入。据我所知，你还没有定义一个国家。使用构造函数并创建一个默认状态。

然后，您可以将this.state.value传递给输入。另外，如果对输入的更改由父组件处理并存储在该组件状态中，则应该将值作为prop传递给子组件。在这种情况下，不需要构造函数。