Миграция редукс-формы на v6, функции onBlur и onChange

Я переношу редукционную форму на новейшую версию 6.0.0rc3. В этой версии массив fields удален и заменен компонентом Field (см. http://redux-form.com/6.0.0-rc.3/docs/MigrationGuide.md/). Раньше я расширял функцию onBlur по умолчанию в v5 следующим образом:

const { user_zipcode } = this.props.fields;
onChange={
  val => user_zipcode.onChange(this._handleZipcodeChange(val))
}

Однако в новой версии этого сделать уже нельзя, потому что this.props.fields не существует.

Из того, что я нашел в документах, новый способ должен состоять в том, чтобы создать компонент для каждого поля формы, который имеет отдельную функцию, и расширить там функцию onBlur:

_onBlur() {
  // my custom blur-function
}

render() {
  const { input, touched, error } = this.props;
  return (
    <input
      className={styles.input}
      {...input}
      onBlur={() => {
        // 2 functions need to be called here
        this._onBlur();
        input.onBlur();
      }}
    />
  );
}

Это нормально, за исключением того, что мне нужно создать новый элемент для каждого поля, которое должно делать что-то другое, когда происходит событие размытия. В некоторых полях мне нужно сделать вызов API, что я и делаю, отправляя действие. Например, я должен сделать это, чтобы получить адрес. В этих компонентах я должен подключить свой магазин, поэтому он подключается много раз.

Я попытался передать свою пользовательскую функцию от родителя к компоненту Field, например:

<Field
  type="text"
  name="user_zipcode"
  component={Zipcode}
  onBlurFunction={this._myBlurFunction}
/>

и получить обе функции в моем компоненте из реквизита:

...
onBlur={() => {
  input.onBlurFunction();
  input.onBlur();
}}
...

Это не работало правильно из-за нового React warning< /а>.

Есть лучший способ это сделать?


reactjs redux redux-form
person Ashwin van Dijk    schedule 21.07.2016    source источник

Ответы (2)


arrow_upward
1
arrow_downward

В итоге я создал пользовательский компонент для каждого поля формы с функцией onChange или onBlur. Таким образом, вы можете запускать обе функции, поэтому вызываются все действия по умолчанию для избыточной формы.

// Licenceplate-component

export default class Licenceplate extends Component {

    _handleBlur = ({ currentTarget: { value } }) => {
        // my blur function
    }

    render() {
        const {
          input,
          meta: { touched, error }
        } = this.props;

        return (
          <div className={styles.wrapper}>
            <input
              {...input}
              type="text"
              onBlur={
                e => input.onBlur(this._handleBlur(e))
              }
            />

         </div>
       );
   }
}


// In my form-component
<Field
    component={Licenceplate}
    name="car_licenceplate"
    type="text"
/>
person Ashwin van Dijk    schedule 10.08.2016
comment
Как бы вы это сделали, если бы использовали стандартный способ использования Field, как указано в примерах: <Field name="firstName" component="input" type="text" placeholder="First Name"/>? Вы пробовали это и в этом стиле? - person geoboy; 27.11.2016
comment
Некоторые находят решение для этого? - person directory; 16.08.2017

arrow_upward
0
arrow_downward

В документах это написано

реквизит: объект [необязательно]

Объект с пользовательскими реквизитами для передачи через компонент Field в компонент, предоставленный компоненту prop. Этот реквизит будет объединен с реквизитом, предоставленным самим Field. Это может быть полезно, если вы используете TypeScript. Эта конструкция совершенно необязательна; основной способ передачи реквизитов вашему компоненту — передать их непосредственно компоненту Field, но если по какой-то причине вы предпочитаете объединять их в отдельный объект, вы можете сделать это, передав их в реквизиты.

<Field component={renderField} props={{ disabled: true }} />

http://redux-form.com/6.0.0-rc.3/docs/api/Field.md/

Может быть, попробовать тот. Вероятно, это предотвратит ошибку. Или вытащите свою функцию, прежде чем она будет передана на вход.

person Jeroen Wienk    schedule 22.07.2016
comment
Пробовал, но получил ту же ошибку. Я мог бы извлечь свой functionProp, но мне нужно более общее решение для этого. С другой стороны, я полагаю, компонент для каждого поля формы, который имеет определенную функцию, не так уж и плох? - person Ashwin van Dijk; 22.07.2016