Question

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

因此，我有2个减速器和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将值直接写入正确的“用户”或“电影”状态。例如电影[1] .name应该通过reducer附加到电影状态：

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

我应该通过道具在每个输入字段上传递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。

在React + Redux

1 个答案: