如何在 React/Redux 应用程序中正确管理表单

How to properly manage forms in React/Redux app

本文关键字：管理 表单 应用程序 Redux React      更新时间：2023-09-26

我正在学习一些关于React/Redux的教程。我不清楚的部分是输入表单。我的意思是如何处理更改以及在哪里管理状态这是一个非常简单的形式，只有一个字段。

export default class UserAdd extends React.Component {
static propTypes = {
    onUserSubmit: React.PropTypes.func.isRequired
}
constructor (props, context) {
    super(props, context);
    this.state = {
        name: this.props.name
    };
}
render () {
    return (
        <form
            onSubmit={e => {
                e.preventDefault()
                this.handleSubmit()
            }}
        >
            <input
                placeholder="Name"
                onChange={this.handleChange.bind(this)}
            />
            <input type="submit" value="Add" />
        </form>
    );
}
handleChange (e) {
    this.setState({ name: e.target.value });
}
handleSubmit () {
    this.props.onUserSubmit(this.state.name);
    this.setState({ name: '' });
}
}

我觉得这就像打破了 Redux 的理念，因为表示组件正在更新状态，对吗？这是要与表示组件耦合的连接组件。

const mapDispatchToProps = (dispatch) => {
    return {
        onUserSubmit: (name) => {
            dispatch(addUser(name))
        }
    }
}
const UserAddContainer = connect(
    undefined,
    mapDispatchToProps
)(UserAdd)

这是正确的遵循方式，还是我把事情搞混了？在用户添加组件中调用 setState 并在按下的每个键上更新状态是否正确 （handleChange） ？

谢谢

有一个很好的库 Redux 表单，用于通过以 Redux 方式更新全局存储来处理表单。有了它的帮助下，您不必为每个输入设置操作，只需设置整个表单及其状态即可。看看吧。

该库的主要原则包括通过调度 redux 操作来更新输入值，而不是使用setState的东西。对于应用中的每个窗体，全局状态中都有一个单独的property。onChange，每个blur，submit事件都会发送一个改变状态的动作。动作创建者对于所有表单都是通用的，无需为每个表单单独声明它们，只需将有效负载中的表单 ID 或名称传递给化简器，这样它就可以知道应该更新哪个表单的属性。

例如。应该在应用状态下将属性form设置为普通对象。应用程序中的每个新窗体都应在其中存储其状态。让我们给你的表单一个 name 属性，所以它应该作为我们的识别器。

render () {
return (
    <form
        name="AForm"
        onSubmit={e => {
            e.preventDefault()
            this.handleSubmit()
        }}
    >
        <input
            name="name"
            placeholder="Name"
            onChange={this.handleChange.bind(this)}
        />
        <input type="submit" value="Add" />
    </form>
);

}

由于它只有一个属性Name，表单状态现在应该有一个这样的结构：

form: {
  AForm: {
     Name: {
       value: '',
       error: ''
     }
  }
}

此外，应该有一个动作创建者： 

export function onFormFieldChange(field) {  
  return {
    type: "redux-form/CHANGE"
    field: field.name
    value: field.value,
    form: field.form
  }
}

所有需要的数据都应作为支付负荷传递，因此，缩减器现在将知道要更新的形式和字段。

现在，当连接表单组件时，应将此操作创建器设置为属性：

import { onFormFieldChange } from `path-to-file-wit-actions` 
const mapStateToProps = (state, ownProps) => {
  const { AForm } = state.form
  return {
   name: AForm.name
  }
} 
const mapDispatchToProps = (dispatch) => {
  return {
    onChange: (e) => {
      dispatch(onFormFieldChange({
        field: 'name',
        value: e.target.value,
        form: 'AForm'
      }))
    },
    onUserSubmit: (name) => {
      dispatch(addUser(name))
    }
  }
}
const UserAddContainer = connect(
  undefined,
  mapDispatchToProps
)(UserAdd)

在组件中，字段值和onChange事件处理程序现在应该取自 props：

<input placeholder="Name" name="this.props.name.value"  onChange={this.props.handleChange.bind(this)} />

因此，表单正在以"Redux"方式处理。每次按键时，全局状态都会更新，输入将重新呈现为新值。其他事件也应该做类似的事情，如onBLur、onFocus、onSubmit等。由于有很多工作要做，因此使用 Redux Form 更容易解决。

这是一个非常粗略的例子。几乎每一行代码都可以增强，希望你能理解它的含义。

我通常使用 this.setState() 将表单状态存储在表单组件中，并且只使用完整的表单对象触发操作，该操作会传递给某种POST ajax 调用。

相关文章：