Question

我有一个带有验证的表单，然后创建对象＆＃34;字段＆＃34;。我现在如何将此对象传递给动作＆＃34; createPost＆＃34;？我猜我需要做些什么＆＃34;道具＆＃34;？或者我猜测它可能与调度程序行有关？

import React, { Component } from 'react';
import Header from '../components/header';
import Formous from 'formous';
import { createPost } from '../actions/index';

class ErrorText extends Component {
  render() {
    return <div style={{ color: '#f00' }}>
      {this.props.errorText}
    </div>
  }
}

class MyComponent extends Component {
  componentWillReceiveProps(nextProps) {
    // Set default form values (might be appropriate in a different method
    this.props.setDefaultValues({
      age: 33,
      name: 'Sir Andrew',
    });
  }

  handleSubmit(formStatus, fields) {
    if (!formStatus.touched) {
      alert('Please fill out the form.');
      return;
    }

    if (!formStatus.valid) {
      alert('Please address the errors in the form.');
      return;
    }

    // All good! Do something with fields.name.value and fields.age.value
    console.log(formStatus, fields);
  }

  render() {
    const {
      fields: { age, name },
      formSubmit,
    } = this.props;

    return <div>
    <Header />
      <form onSubmit={formSubmit(this.handleSubmit)}>
        <div>
          <input
            placeholder="Name"
            type="text"
            value={name.value}
            { ...name.events }
          />
          <ErrorText { ...name.failProps } />
        </div>
        <div>
          <input
            placeholder="Age"
            type="text"
            value={age.value}
            { ...age.events }
          />
          <ErrorText { ...age.failProps } />
        </div>
        <div>
          <button type="submit">Submit</button>
        </div>
      </form>
    </div>
  }
}

const formousOptions = {
  fields: {
    name: {
      tests: [
        {
          critical: true,
          failProps: {
            errorText: 'Name is required.',
          },
          test(value) {
            return value !== '';
          },
        }
      ],
    },

    age: {
      tests: [
        {
          critical: true,
          failProps: {
            errorText: 'Age should be a number.',
          },
          test(value) {
            return /^\d*$/.test(value);
          },
        },
        {
          critical: false,
          failProps: {
            errorText: 'Are you sure you\'re that old? :o',
          },
          test(value) {
            return +value < 120;
          },
        },
      ],
    },
  },
};

export default Formous(formousOptions)(MyComponent)

Answer 1

通过道具发送redux动作。

this.props.onMySubmit({
  name: fields.name.value,
  age: fields.age.value
});

redux-react动作连接器（onMySubmit）将动作（动作类型和参数）分派给商店。这由reducers处理，以修改商店的状态。

React JS将对象传递给一个动作

1 个答案: