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

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

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} />

来源

2017-04-04 J64

您是否可以更新您的问题以包含显示组件之间交互的代码？ – elevine

是的，我可以做到这一点。我其实只是意识到我没有按下我输入的GitHub，所以我一定能看到混乱。 – J64

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

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

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

来源

2017-04-04 19:11:31 Dlyrious

那么值状态是在父组件中。我试着用onChange通过道具来做，但我一直没能得到结果。这可能是因为我所看重的“this.state.value”并不是一个道具，但我不太确定该作品的去向。 – J64

如果值处于父级状态，则必须将其作为道具传递，然后将道具分配给输入值。 – Dlyrious

现在明白了。谢谢您的帮助！ – J64

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

回答

相关问题