валидация редукционной формы для повторно используемого компонента

Эй, я пытаюсь использовать валидацию 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'];

Спасибо!


reactjs redux redux-form
person David    schedule 02.04.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Декоратор 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);
person Erik R.    schedule 05.04.2016