在 React + Redux 中创建输入组件并控制多个表单状态

Question

我的项目有 2 个单独的表单，“用户”和“电影”。我创建了一个输入组件，我想在所有 3 种形式中使用它。这不是一件复杂的事情，但我想知道正确的方法是将每次击键或模糊操作的数据保存到正确的 redux 存储状态。

所以我有 2 个 reducer 和 2 个表单，“用户”和“电影”。用户表单只包含一些用户和用户元数据。电影表单将是用户看过的电影的“集合”。

我已经创建了这个文本字段组件

import React from 'react';

class TextField extends React.Component {

  constructor(props) {
    super(props);
    this.state =  {
      name: this.props.name,
      value: this.props.value
    }
  }

  onChange = (e) => {
    const {
      value
    } = e.target

    this.setState({
      value: value
    });
  }

  onBlur = (e) => {
    const {
      value
    } = e.target

    this.setState({
      value: value
    });
  }

  render() {
    return(
      <input
        type="text"
        name={this.state.name}
        value={this.state.value}
        onBlur={(e) => this.onBlur(e)}
        onChange={(e) => this.onChange(e)}
      />
    )
  }
}

export default TextField;

在表单组件中

<TextField
   name={`${this.state.movies}[${index}].name`}
   value={item.name}
/>

不，我需要正确的方法通过 onChange 或 onBlur 将值直接写入正确的“用户”或“电影”状态。例如movies[1].name 应该通过 reducer 附加到电影状态：

movies : [{
  name: 'movie #1'
 },
  name: 'movie #2'
}]

我是否应该通过 props 在每个输入字段上传递一个 onChange 和 onBlur 函数，让 TextField 组件知道如何处理以及将值写入存储的位置？例如

<TextField
  name={`${this.state.movies}[${index}].name`}
  value={item.name}
  onBlur={(event) => console.log('onBlur action')}
  onChange={(event) => console.log('onChange action')}
/>

我使用过诸如“redux-form”之类的模块，但感觉很重，不太稳定。我想自己控制一切，因为“电影”表单只是一个没有用户端验证的集合。

Answer 1

是的！事件传播是要走的路。您绝对不想将TextField 组件与任何 redux 或任何其他状态管理逻辑结合起来，因为它违背了可重用性的整个目的。我将在 Form 组件中创建处理函数来执行该操作（例如 handleOnBlurMovieInput、handleOnChangeUserInput）并将它们分别作为道具传递给 TextField。