时间戳

首页 > 解决方案 > 在 react 和 redux 中自动保存表单字段

reactjs - 在 react 和 redux 中自动保存表单字段

问题描述

我有一个父组件，它是一个表单，它通过这样做通过 redux 连接到商店：

// FormComponent
export default connect(mapStateToProps, mapDispatchToProps)(FormComponent);

在该表单中，我有一个输入属性列表，它们是表单的子组件：

我需要通过在输入失去焦点后立即传递包含所有属性的 JSON 对象来进行更新 API 调用，从而将任何字段中的更改保存到服务器。

API 调用类似于：

updatePersonInfo({firstname: 'new name', lastname: 'new name', address: 'new address' });

我的想法是将PersonInfo对象作为道具从 Form 组件传递给所有子组件。每个子组件将从 props 更新一个属性，并使用更新的对象PersonInfo调度 UPDATE_PERSONINFO 操作。PersonInfo但要做到这一点，我还需要将所有子组件连接到存储：

// FirstNameComponent
export default connect(mapStateToProps, mapDispatchToProps(FirstNameComponent);

// LastNameComponent
export default connect(mapStateToProps, mapDispatchToProps)(LastNameComponent);

// AddressComponent
export default connect(mapStateToProps, mapDispatchToProps)(AddressComponent);

但我认为出于性能原因我们应该避免使用连接。此外，我不相信我需要 4 个连接器来调用一个操作。

处理这种情况的最佳选择是什么？

标签： reactjsreact-redux

解决方案

对于这个问题，我可以提供一个我刚刚学到的好技巧，在这些情况下，我们应该使用容器组件的状态来创建受控表单组件并在每次表单更改时更新状态，这样您就可以随时访问您的表单数据容器组件的状态。（例如：由于实现了受控组件，我们始终可以通过保存按钮或在您的情况下将我们可用的表单数据从容器组件的状态发送到 Redux关注另一个字段）。

那么让我们开始吧：

(1)您需要为每个输入使用一个name属性和一个，如下所示：onChange

<input 
  type='text'
  name={name}
  className='form-control'
  value={value}
  onChange={onChange}/>

(2)该onChange函数被放置在您的容器组件中，并通过 props 传递给您的输入组件，如下所示：

  updateCourseState(e) {
    const field = e.target.name
    const _formData = {...this.state.formData}
    _formData[field] = e.target.value // (*)
    return this.setState({ formData: _formData}) // <= then update the state on every change
  }

在这里 (*) 通过使用预先计算的动态变量名称，我们为 temp _formData 对象中的每个输入字段创建一个属性，并将传递的事件的目标值分配给它，之后我们更新状态。

(3)最后，您现在可以随时将状态传递给 redux，当我阅读您的问题时，您可以使用Refs()它来跟踪何时使用专注于另一个领域，您可以在 YouTube 上查看本教程，并当你改变焦点时，这里就是你想要将数据发送到 Redux 的地方。

推荐阅读