Question

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

我使用商店的问题是我的表单中有一个子组件，允许我用按钮选择数字1-5。我希望该组件可以重用，但如果我使用商店，我必须将商店硬编码到子组件中，这意味着我无法在其他地方使用它。我只是从孩子那里设置父状态吗？

如果有人能指出一些好的教程或反应/助焊剂表格的例子，请告诉我。

Answer 1

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

如果你想要使用商店，那么你可以在你的子组件中创建一个额外的属性（prop），它将是一个函数（fe onChange），它应该从父组件作为prop传递（这个函数应该在商店中设置数据）。然后，您可以重用此组件，因为只有父级才需要访问存储。

所以在子组件中：

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

或类似的东西。

代码未经过测试，但您应该明白这一点。

与助焊剂反应的形式

1 个答案: