Question

我正在构建一个食谱应用程序。目前我想要添加食谱时有一个弹出框。在此弹出窗口中，我希望在确认您要添加配方时存储输入。我查看了值事件目标方法，但我相信我无法使其工作，因为此弹出框的状态是通过更高的组件（主应用程序组件）访问的。

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

这是我目前要尝试使其工作的原因，但这导致弹出框不再出现。这是主app组件中的状态以及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传递给子组件。在这种情况下，不需要构造函数。

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

1 个答案: