如何在 Redux 调度中访问表单值？答案

【问题标题】：How to access a form value in Redux dispatch?如何在 Redux 调度中访问表单值？
【发布时间】：2018-03-14 21:32:24
【问题描述】：

我有以下表单组件：

export class LoginPage extends React.PureComponent {
  render() {
    return (
      <div>
        <Form onSubmit={this.props.onSubmitForm}>
          <Input id="username" type="text" value={this.props.username} />
          <button type="submit">Submit</button>
        </Form>
      </div>
    );
  }
}

在组件之后我有一个mapDispatchToProps 函数：

export function mapDispatchToProps(dispatch) {
  return {
    onSubmitForm: (evt) => {
      // I need to access the `username` property here to pass it as argument.
      dispatch(postUsername(username));
    },
  };
}

我需要访问mapDispatchToProps 函数中的username。最简单的方法是什么？我不需要在这一步中存储username。
谢谢。

【问题讨论】：

标签： react-redux redux-saga

【解决方案1】：

您可以使用event.target.username.value 属性，因此您的代码应如下所示：

export function mapDispatchToProps(dispatch) {
  return {
    onSubmitForm: (evt) => {
      // I need to access the `username` property here to pass it as argument.
      dispatch(postUsername(evt.target.username.value));
    },
  };
}

通过这样做，您应该拥有用户名值。

【讨论】：

谢谢，这里其实是evt.target.username.value。