带有通量的 reactjs 中的表单

Question

我有一个表单，这个表单需要将一些数据发布到我的后端。使用助焊剂，使用商店的最佳做法是什么？

我使用商店的问题是我的表单中有一个子组件，它允许我选择带有按钮的数字 1-5。我希望该组件可重用，但如果我使用商店，我必须将商店硬编码到子组件中，这意味着我不能在其他地方真正使用它。相反，我是否只设置子级的父级状态？

如果有人可以指出一些好的教程或 react/flux 表单的示例，请告诉我。

Answer 1

在我看来，任何后端交互都应该通过操作来完成，但是...

如果您仍然想使用 store，那么您可以在子组件中创建附加属性 (prop)，这将是一个函数 (f.e. onChange)，应该从父组件作为 prop 传递（这个函数应该设置数据有存货）。然后你可以重用这个组件，因为只有 parent 需要访问 store。

所以在子组件中：

onButtonClick(e) {
    this.state.value = e.target.value;
    if (this.props.onChange) this.props.onChange(e.target.value);
}


<div>
    <button onClick={this.onButtonClick.bind(this)} value="1">1</button>
    <button onClick={this.onButtonClick.bind(this)} value="2">2</button>
    <button onClick={this.onButtonClick.bind(this)} value="3">3</button>
    <button onClick={this.onButtonClick.bind(this)} value="4">4</button>
    <button onClick={this.onButtonClick.bind(this)} value="5">5</button>
</div>

在父母中：

setMyStoreState(value) {
    store.setNumber(value);
}

<Subcomponent onChange={this.setStoreState.bind(this)} />

或类似的东西。

代码未经测试，但你应该明白。