Question

我有一个演示组件，我可以根据他们的ID动态提取模块（让我们把它们想象成HTML代码片段，包括输入字段，它们还有其他功能对这些不重要目的）。我可以将具有相同id的多个模块插入到演示组件的行中。

这些模块正在使用redux reducer进行调整，我在按钮点击时调度一个动作，我想要插入我的演示组件然后我＆＃ 39; m映射通过状态数组，根据这些ID从单独的文件中提取模块。

这是我添加/删除这些模块的减速器：

case RECEIVE_MODULE:
    return [
        ...state, action.receiveModule
    ]

case REMOVE_MODULE:
    return state.filter( (module, i) => ( i !== action.moduleRemoved ))

default:
    return state

在前端，每个模块都包含输入字段，我遇到的问题是，当用户添加多个模块并将任何数据输入到这些模块中，然后将一个或多个模块中的一个或多个数据删除in不存储在任何地方，因此每次状态数组保存有关哪些模块被拉入的信息发生变化时，都必须再次插入。

我的问题是我如何以及在哪里保持这些输入字段的状态？！

在模块组件I中，输入字段处于以下状态：

this.state = {
    inputs: [
        { type: 'text', placeholder: 'placeholder text', name: 'text1', id: 'text1', value: '' },
        { type: 'text', placeholder: 'another placeholder text', name: 'text2', id: 'text2', value: '' },
        { type: 'text', placeholder: 'third placeholder text', name: 'text3', id: 'text3', value: '' },
    ],
}

但是因为我希望能够在行中添加多个相同的模块，所以我无法将输入值存储在模块本身中。

我认为最好的方法是将值存储在状态中，并在我的演示组件中呈现模块的ID，因此我将另一个操作SAVE_MODULE添加到我的减速机。

我可以将这些输入字段中的值与状态数组中模块的位置一起传递到reducer中。我不确定如何处理它们。

假设状态数组中有5个元素，用户在索引为3的元素中输入数据，点击保存按钮，我将索引和输入字段中的数据作为对象传递给我的reducer：

 this.props.dispatch(actions.saveModule({key: moduleIndex, value: inputFieldsValue}))

因此reducer接收：key：3，value：＆＃39; 1个输入中的文本，2个输入中的文本，3个输入中的文本＆＃39;

如何处理它，以便在状态数组被修改后，我可以将数据传回前端的输入字段。通过添加/删除模块。

希望有意义，如果您需要进一步解释，请告诉我。

非常感谢任何建议/想法/提示。

React - 使用redux将输入值添加到状态数组中的值

0 个答案: