С помощью формы React redux, как я могу стилизовать метку, окружающую скрытую радиокнопку?

С помощью response redux-form у меня есть следующая форма:

    <form onSubmit={this.props.handleSubmit(this.handleSubmit.bind(this))}>
      <fieldset className="form-group">
        <Field name="job_title_id" component={errorMessage} />
        {this.props.job_titles.map(jobTitle => (
        <div className="form-check" key={jobTitle.id}>
          <label className="btn btn-secondary">
            <Field
              name="job_title_id"
              component="input"
              type="radio"
              value={jobTitle.id}
              checked={this.props.job_titles.id}
            />
            {' '}
            {jobTitle.title}
          </label>
        </div>
        ))}
      </fieldset>
      <div className="form-group">
        <button className="btn btn-primary" type="submit">Next</button>
      </div>
    </form>

В целях стилизации CSS скрывает переключатель. Мне нужно, чтобы поле над переключателем знало, установлен ли переключатель, чтобы я мог добавить класс АКТИВНЫЙ к метке выше:

если отмечено:

<label className="btn btn-secondary ACTIVE">

если не отмечено:

<label className="btn btn-secondary">

С помощью формы React redux, как я могу стилизовать метку, окружающую скрытую радиокнопку?


reactjs redux react-redux redux-form react-redux-form
person AnApprentice    schedule 10.07.2017    source источник
comment
Вы хотите, чтобы переключатель был установлен или снят? или когда CSS скрывает переключатель? В каком из этих случаев вы хотите активировать ярлык?   -  person Henrique Oecksler Bertoldi    schedule 10.07.2017
comment
css всегда будет скрывать переключатель, но мне нужна метка, чтобы добавить класс активного, когда установлен переключатель, скрытый в поле метки.   -  person AnApprentice    schedule 10.07.2017
comment
Это ответ на вопрос? :)   -  person AnApprentice    schedule 10.07.2017
comment
Может быть. Но мне нужно больше информации. Кто несет ответственность за то, чтобы установить эту радиокнопку?   -  person Henrique Oecksler Bertoldi    schedule 10.07.2017
comment
Прости. Не понимаю q   -  person AnApprentice    schedule 10.07.2017
comment
Когда эта радиокнопка будет отмечена?   -  person Henrique Oecksler Bertoldi    schedule 10.07.2017
comment
когда пользователь нажимает на ярлык   -  person AnApprentice    schedule 10.07.2017

Ответы (1)


arrow_upward
1
arrow_downward

Теперь я понимаю.

Самый простой способ сделать это - сохранить состояние радио в состоянии прослушивателем onChange. Таким образом, вы помещаете класс в Label.

constructor(props){
  super(props);
  ....  
  this.onRadioChange = this.onRadioChange.bind(this);

  this.state = {
    radioChecked: false
  }
}

onRadioChange (event) {
  this.setState({
    radioChecked: event.target.value
  });
}
....
<label className={(this.state.radioChecked ? "active": "" ) + " btn btn-secondary"}>
  <Field
    name="job_title_id"
    component="input"
    type="radio"
    value={jobTitle.id}
    checked={this.props.job_titles.id}
    onChange={this.onRadioChange}
  />
  {' '}
  {jobTitle.title}
</label>
....

Я думаю, это должно работать нормально, хотя я не уверен, почему у вас должна быть радиокнопка, но хорошо: P.

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

person Henrique Oecksler Bertoldi    schedule 10.07.2017
comment
Спасибо за ответ, очень ценю. Это работает, но, похоже, выходит за рамки redux-form, чего я пытаюсь избежать. - person AnApprentice; 10.07.2017
comment
Я согласен. Но, как я уже сказал, вы можете найти решение для сокращения, используя пример выбора значений формы. - person Henrique Oecksler Bertoldi; 10.07.2017
comment
стрелять, оказывается, что это не работает ... значение из решения redux возвращает СТАРОЕ значение, а не последний отмеченный переключатель - person AnApprentice; 10.07.2017
comment
печально, но факт ... вы можете найти другой способ сделать это без переключателя? - person Henrique Oecksler Bertoldi; 10.07.2017