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入门套件，它看起来更容易使用。它使用智能/容器组件和哑/表示组件组合：

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类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道具，该道具未在容器中传递。这是因为它由onSubmit装饰器提供。然后处理该事件，只将formData返回给容器处理程序，即顶级reduxForm道具。

基本上，您可以将其视为SurveyForm返回已包装的fromUser($user)组件。

您可以深入了解代码ES2016 decorator，但要注意，它非常密集。

处理以React / Redux形式提交

1 个答案: