Redux Form, поля переключателя, как поддерживать значения переменных?

В моей форме React redux у меня есть следующее:

        <fieldset className="form-group">
          <legend>Radio buttons</legend>
          {this.props.job_titles.map(jobTitle => (
          <div className="form-check" key={jobTitle.id}>
            <label className="form-check-label">
              <Field
                name="job_title_id"
                component="input"
                type="radio"
                value={jobTitle.id}
              />
              {' '}
              {jobTitle.title}
            </label>
          </div>
          ))}
        </fieldset>

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

Что странно, если я обновлю: value={jobTitle.id} до value="anything", тогда переключатели могут быть выбраны.

Я не вижу ничего в документах формы redux о динамически генерируемых переключателях. Что я делаю неправильно?

Спасибо


reactjs redux redux-form react-redux-form
person AnnaSm    schedule 03.07.2017    source источник
comment
это радиокнопки, а не флажки ...   -  person AnnaSm    schedule 04.07.2017
comment
Можете ли вы добавить код с элементом <input>?   -  person sissonb    schedule 04.07.2017
comment
@sissonb означает, как он отображается в браузере?   -  person AnnaSm    schedule 04.07.2017
comment
Я хотел посмотреть, что делает элемент <Field>, но нашел его здесь. redux-form.com/6.8.0/docs/api/Field .md   -  person sissonb    schedule 04.07.2017
comment
Я неправильно использую <Field>?   -  person AnnaSm    schedule 04.07.2017
comment
Вам нужно будет управлять свойством input.checked. redux-form.com /6.8.0/docs/api/Field.md/   -  person sissonb    schedule 04.07.2017
comment
а это радиокнопка? не могли бы привести пример? Спасибо   -  person AnnaSm    schedule 04.07.2017
comment
Интересно, что добавление checked={this.props.job_titles.id} заставило его работать ... не знаю, почему :(   -  person AnnaSm    schedule 04.07.2017

Ответы (2)


arrow_upward
3
arrow_downward

Установите для свойства checked значение state или prop, затем обновите его в обработчике кликов.

<Field
    onClick={
        () => {
            this.setState((prevState) => {
                return {isChecked: !prevState.isChecked};
            });
        }
    }
    name="job_title_id"
    component="input"
    type="radio"
    checked={this.state.isChecked}
    value={jobTitle.id}
/>
person sissonb    schedule 04.07.2017

arrow_upward
8
arrow_downward

Преобразовать значение в строку:

<Field
            name="job_title_id"
            component="input"
            type="radio"
            value={jobTitle.id.toString()}
          />
person Thangbg    schedule 15.12.2017