3

我想在用户提交表单时捕获表单值。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，我相信我会在其中添加动作和动作创建者，这似乎是很多开销。

注意参数 tohandleSubmit是一个事件。

我遇到了以下 React/Redux 入门工具包，它看起来更容易使用。它使用智能/容器组件和哑/演示组件组合：

容器

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

4

1 回答 1

4

关键在于在课堂上redux-form用作ES2016 装饰器SurveyForm。

...
@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道具。

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

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

于 2016-04-07T02:04:28.840 回答