reactjs - 可重用组件的 redux-form 验证

Question

嘿，我尝试使用 reduxform 验证并对可在表单中重复使用并多次调用的组件应用验证。

但我最终将所有的补偿都绑定在一起。不在他们自己的范围内。

比较：

export const fields = ['myField'];

const validate = values => {
    const errors = {};

    // just to see the error:
    errors.myField = 'error!! ';

    return errors;
};

class myField extends React.Component {

    render() {

        const {
            fields: { myField }
        } = this.props;


        return (
            <div className="myField">

                <input type="text" {...myField}  />
                {myField.touched && myField.error && <span>{myField.error}</span>}
            </div>
        );
    }
}

myField.propTypes = {
    fields: React.PropTypes.object.isRequired
}

myField = reduxForm({
        form: 'myform',
        fields: fields,
        destroyOnUnmount: false,
        validate
    }
)(myField);

我尝试在名称中使用“[]”，但最终得到了 X 组件的 X 数组。所以 '[]' 似乎应该用于列表而不是同一组件的新实例。

export const fields = ['myField'];

谢谢！

Answer 1

装饰器reduxForm()应该装饰整个表单，而不是单个输入。你需要更像这样的东西（组件类应该大写）：

// validate.js
const validate = values => {
    const errors = {};

    // just to see the error:
    errors.firstField = 'error!!';
    errors.secondField = 'error!!';

    return errors;
};

// ----------------

// MyField.js
class MyField extends React.Component {
  render() {
    const { field } = this.props;
    return (
      <div className="myField">
        <input type="text" {...myField}  />
        {myField.touched && myField.error && <span>{myField.error}</span>}
      </div>
    );
  }
}
MyField.propTypes = {
  field: React.PropTypes.object.isRequired
};

// ----------------

// MyForm.js
import MyField from './MyField';
import validate from './validate';

class MyForm extends React.Component {
  render() {
    const {
      fields: { firstField, secondField }
    } = this.props;

    return (
      <div className="myForm">
        <MyField field={firstField}/>
        <MyField field={secondField}/>
      </div>
    );
  }
}

MyForm.propTypes = {
  fields: React.PropTypes.object.isRequired
}

MyForm = reduxForm({
  form: 'myform',
  fields: ['firstField', 'secondField'],
  destroyOnUnmount: false,
  validate
})(MyForm);