reduxform - как обрабатывать изменения на переключателе, используя одну функцию handleChange - PullRequest
Новая
       8

reduxform - как обрабатывать изменения на переключателе, используя одну функцию handleChange

0 голосов
/ 14 декабря 2018

Я использую избыточную форму в своем проекте Laravel (реализация React 15.4.2), и у меня есть несколько переключателей.Мне нужна функция handleChange для того, чтобы они помнили, что проверено (если они изменяются с предыдущего значения или выбираются впервые), но я не хочу писать отдельную для каждой переключателя,или реализовать огромный набор правил для каждого из них.

Вот одно из моих полей (только значение 'yes'): 

<input type="radio" onChange={this.handleChange.bind(this, 'maintain_licence', 'yes')} checked={maintain_licence.value === 'yes'} id="maintain-licence-yes" value="yes" name="maintain_licence" /><span>Yes</span>

И это то, что у меня есть дляодна кнопка-переключатель при изменении, основанная на взаимодействии кнопки-переключателя maintain_licence с: 

handleChange(fieldName, value) {
    if(fieldName === 'maintain_licence') {
        this.props.fields.maintain_licence.onChange(value);
    }
}

Это работает нормально - однако, поскольку у меня в форме около 20 радио, я могу представить себе эту функциюстановится довольно долго.В идеале я хотел бы что-то похожее на: 

handleChange(fieldName, value) {
   this.props.fields.fieldName.onChange(value);
}

Но поскольку он пытается найти поле с именем 'fieldName', он выдает ошибку, в которой говорится, что он не может запустить onChange с неопределенным значением.

По сути, мне просто нужно найти способ использования единственной функции для обработки изменений всех переключателей, но я не знаю, как это сделать.

1 Ответ

0 голосов
/ 17 декабря 2018

Вы можете использовать средства доступа к собственности, чтобы получить недвижимость, которую вы хотите.Что-то вроде: 

handleChange(fieldName, value) {
    this.props.fields[fieldName].onChange(value);
}

Ссылка: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_accessors

...