处理以 React/Redux 形式提交

Question

我想在用户提交表单时捕获表单值。 React 教程显示了这一点：

var CommentForm = React.createClass({
  handleAuthorChange: function(e) {
    this.setState({author: e.target.value});
  },
  handleTextChange: function(e) {
    this.setState({text: e.target.value});
  },
  handleSubmit: function(e) {
    e.preventDefault();
    var author = this.state.author.trim();
    var text = this.state.text.trim();
    if (!text || !author) {
      return;
    }
  render: function() {
    return (
      <form className="commentForm" onSubmit={this.handleSubmit}>

此样式通过每个输入的处理函数将所有更改推送到状态。如果我要全力以赴使用 Redux，我相信我会添加动作和动作创建器，这看起来开销很大。

请注意 handleSubmit 的参数是一个事件。

我遇到了以下 React/Redux 入门工具包，它看起来更容易使用。它使用 smart/container 组件和 dumb/presentational 组件组合：

Container

@connect(
  () => ({}),
  {initialize})
export default class Survey extends Component {
  ...

  handleSubmit = (data) => {
    window.alert('Data submitted! ' + JSON.stringify(data));
    this.props.initialize('survey', {});
  }

  render()
    return ( <SurveyForm onSubmit={this.handleSubmit}/> )
  ...

Presentational

class SurveyForm extends Component {
  static propTypes = {
    handleSubmit: PropTypes.func.isRequired,
  }

  render() {
    const { handleSubmit } = this.props;
    return (
      <div>
        <form className="form-horizontal" onSubmit={handleSubmit}>
    ...
  }
}

我不清楚的是，为什么表单的 onSubmit 处理程序的处理程序正在为其 Facebook 教程的参数接收一个事件，但为什么初学者工具包的 onSubmit 处理程序正在接收一个事件表单数据...入门工具包正在利用 redux-form 包，但我认为它不会直接影响此处理程序的行为方式。

Answer 1

密钥在 redux-form 中用作 ES2016 decorator SurveyForm class。

...
@reduxForm({
  form: 'survey',
  fields: ['name', 'email', 'occupation', 'currentlyEmployed', 'sex'],
  validate: surveyValidation,
  asyncValidate,
  asyncBlurFields: ['email']
})
export default
class SurveyForm extends Component {
...

装饰器将充当 SurveyForm 的包装函数，返回包装组件。

您甚至可能已经注意到，SurveyForm 组件接受一个 handleSubmit 属性，该属性不会在容器中传递。这是因为它是由 @reduxForm 装饰器提供的。然后处理该事件，只有 formData 返回给容器处理程序，即顶级 onSubmit prop.

本质上，您可以将其视为 reduxForm 返回包装的 SurveyForm 组件。

您可以深入研究代码 there，但请注意，它非常密集。

处理以 React/Redux 形式提交

Handling submit in React/Redux form

reactjs

redux

redux-form

react-redux