Переопределение поведения onChange с помощью React / Redux Forms - PullRequest
Новая
       8

Переопределение поведения onChange с помощью React / Redux Forms

0 голосов
/ 22 октября 2018

Я создаю сложную форму в React и пытаюсь использовать Redux Forms в качестве вспомогательного инструмента.

Требования проекта следующие:

  1. На странице будут значения, которые меняются в зависимости от полей ввода (например, в таблице Excel)

  2. По крайней мере одно поле будет функционировать как поле ввода и как зависимое поле (оно может быть изменено, но также может изменяться при изменении других полей)

  3. Я хочу контролировать, когда состояние изменится.По умолчанию это происходит мгновенно при изменении входных данных, но я бы предпочел задержку, например в этом примере .

Первая функция в основном следует учебнику по ReduxФормы, у меня это работает.Тем не менее, другие два требуют изменения того, что происходит при обновлении поля, и у меня возникают проблемы с выяснением, как это сделать.Я мог представить, как это сделать с нуля, но хотел посмотреть, есть ли способ использовать эту библиотеку, чтобы упростить задачу.

Мой код работает на GitHub (дополнительный вопрос,Кто-нибудь знает, почему мой сайт GitHub страниц дает 404?

1 Ответ

0 голосов
/ 22 октября 2018

Вам нужно будет создать пользовательский компонент для размещения внутри Field в форме избыточности, в котором вы храните внутреннее состояние, и синхронизировать его с formReducer, когда захотите.

Вы можетеВыполните это за пару шагов:

  1. Создайте пользовательский компонент для использования внутри Field.Этот компонент вводится с meta и input prop .

  2. Создайте свой state для своего React-компонента, в котором вы будете отслеживатьданные, которые вы в конечном итоге отправите в formReducer.

  3. В своем конструкторе используйте props.input.value, чтобы установить исходное состояние.Если вы сделаете это, вы можете использовать объект 'initialValues' для ваших reduxForm.

  4. Используйте connect на react-redux, чтобы сделать возможным использование react-form.создатели действий.В вашем случае вы будете использовать change создатель действий .

  5. Создайте свою функцию рендеринга с вашим полем ввода и запустите действие change, чтобыизмените значение вашего formReducer для этого поля.

Так что все сводится к следующему: 

<Field
  name="daysPerWeek"
  component={MyCustomComponent} // 1
/>

...

class MyCustomComponent {
  constructor(props) {
    super(props);

    this.state = {
      value: props.input.value, // 2 and 3
    }
  }

  ....
}

4: 

import { connect } from 'react-redux';
import { change } from 'react-form';

const mapDispatchToProps = (dispatch, ownProps) => ({
  ourCustomChange: (value) => dispatch(change(ownProps.meta.form, ownProps.input.name, value))
})

export default connect(undefined, mapDispatchToProps)(MyCustomComponent);

5: 

....
 componentDidUpdate(prevProps, prevState) {
   if (prevState.value !== this.state.value) {
     this.debounceAndEmit();
   }
 }

 debounceAndEmit() {
   // Debounce for some time. Maybe use:
   // import { debounce } from 'throttle-debounce';
   // for that:
   debounce(2000, () => {
     this.props.ourCustomChange(this.state.value)
   })
 }

 handleChange(event) {
   // Do things here like trimming the string, regex, whatever.
   this.setState({ value: event.target.value })
 }

  render() {
    return (
      <input
        {...this.props.input} // Includes standard redux-form bindings for input fields. 
        value={this.state.value}
        onChange={this.handleChange.bind(this)}
      />
    )
  }
....

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

Если вы хотите, чтобы поля формы менялись в зависимости от других полей, вы должны использовать селекторы , чтобы вставить их значения вВаш пользовательский компонент для ответа на этот вопрос.

Это отвечает на ваш вопрос?

...