处理以 React/Redux 形式提交 [英] Handling submit in React/Redux form

问题描述

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

I want to capture the form values when a user submits a form. The React tutorial shows this:

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，我相信我会在混合中添加动作和动作创建者，这似乎是很多开销.

This style pushes all changes into state via a handling function per input. If I were to go full on with Redux, I believe I would add actions and action creators to the mix, which seems like a lot of overhead.

注意 handleSubmit 的参数是一个事件.

Note the argument to handleSubmit is an event.

我遇到了以下 React/Redux 入门套件，它看起来更容易使用.它使用智能/容器组件和哑/展示组件组合:

I came across a following React/Redux starter kit which looks to be much easier to work with. It uses a smart/container component and dumb/presentational component combination:

容器

@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}/> )
  ...

演示

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 包，但我认为它不会直接影响该处理程序的行为方式.

What I'm unclear on is why the handler for the form's onSubmit handler is taking in an event for its argument for the Facebook tutorial, but why the starter kit's onSubmit handler is taking the form data... The starter kit is leveraging the redux-form package but I don't see it directly affecting how this handler should be behaving.

推荐答案

关键在于 redux-form 被用作 ES2016 装饰器在 SurveyForm 类上.

The key is in redux-form being used as an ES2016 decorator on the SurveyForm class.

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

装饰器将作为 SurveyForm 的包装函数，返回一个包装组件.

The decorator will act as a wrapping function for the SurveyForm, returning a wrapping component.

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

As you may even have noticed, the SurveyForm component accepts an handleSubmit prop which is not being passed down in the container. This is because it is provided by the @reduxForm decorator. The event is then handled and only the formData is returned to the container handler, the top-level onSubmit prop.

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

Essentially, you can think about it as reduxForm returning a wrapped SurveyForm component.

您可以在那里深入了解代码，但请注意，它非常密集.

You can dive into the code there, but be warned, it's pretty dense.

这篇关于处理以 React/Redux 形式提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！