Блог

Главная - Вопросы по программированию - Откуда компонент поля в форме сокращения получает входной реквизит?

Откуда компонент поля в форме сокращения получает входной реквизит?

#redux #react-redux #redux-form

#redux #реагировать-redux #redux-форма

Вопрос:

Изучаем redux-формы с этой страницы, но не понимаем, как входные реквизиты передаются полевому компоненту, как показано ниже:

 class MyCustomInput extends Component {
  render() {
    const { input: { value, onChange } } = this.props
    return (
      <div>
        <span>The current value is {value}.</span>
        <button type="button" onClick={() => onChange(value   1)}>Inc</button>
        <button type="button" onClick={() => onChange(value - 1)}>Dec</button>
      </div>
    )
  }
}

Откуда MyCustonInput получает input реквизит? Пример показывает это только ниже:

 import MyCustomInput from './MyCustomInput'

...

<Field name="myField" component={MyCustomInput}/>

Ответ №1:

Field — это компонент более высокого порядка, который применяет эти свойства ко всему, что передается component . Он эффективно определяет, какие значения требуются полю и как оно должно быть подключено к хранилищу redux, в зависимости от переданного вами компонента и, возможно, других свойств Field .

Исходный код, вероятно, является лучшим источником истины по этому вопросу. Вы можете увидеть, где здесь определяется ввод в функции createFieldProps: https://github.com/erikras/redux-form/blob/master/src/createFieldProps.js