Реагировать на событие радио-кнопки на отмеченном атрибуте

Я пытаюсь обработать событие на основе атрибута "checked" переключателя в React.js. Я хочу, чтобы кнопки позволяли выбирать более одного значения, поэтому я удалил атрибут «name», который, казалось, запрещал выбор нескольких значений.

Базовый компонент радиокнопки выглядит так:

export function Radio_Button_Multiple_Selection (props) {
  return (
    <label>
      <input  type="radio"
              checked={props.form_data[props.field_name].indexOf(props.btn_value) > -1}
              onClick={props.radio_effect} />
      {props.btn_value}
    </label>
  )
}

У меня есть объект form_data, который имеет массив значений, соответствующих btn_value переключателей, где, если значение найдено в массиве, оно должно появиться как проверенное. (И эта часть сейчас работает нормально, они действительно проверены, как и ожидалось):

const form_data = {
...
  occupations: ['student', 'merchant', 'paladin', 'troll'],
...
}

Теперь у меня также есть класс реакции с методом для управления значениями в массиве профессий, который отвечает на то, был ли уже выбран выбранный переключатель, или нет:

handleRadioButton (event) {
  const target = event.target;
  const value = target.value;
  const isChecked = target.checked;
  console.log(isChecked) // this undefined. why?!?
  if (isChecked) {
    // remove it from array
    // etc.
  } else {
    // add it to array
    // etc.
  }
}

Моя основная проблема заключается в следующем:

Когда я console.log логику "checked", которая возвращает логическое значение внутри атрибута checked компонента RadioButton, оно появляется, как ожидалось (true или false, если оно есть или отсутствует в массиве). Но он всегда появляется как checked = undefined в методе класса для обработки кнопок.


reactjs events radio-button checked
person jaimefps    schedule 18.08.2017    source источник
comment
вы уверены, что удалили элемент из массива?   -  person webdeb    schedule 18.08.2017
comment
Сначала я пытаюсь получить доступ к проверенному атрибуту в объекте события. это то, что я еще не мог сделать; или, по крайней мере, не правильно: я всегда получаю isChecked = true в методе обработчика событий, даже когда я получаю false в компоненте переключателя   -  person jaimefps    schedule 18.08.2017
comment
Пожалуйста, попробуйте! Инвертировать значение в условии if   -  person webdeb    schedule 18.08.2017
comment
Потому что радиокнопки обычно не снимают галочку, как флажки   -  person webdeb    schedule 18.08.2017
comment
Я только что заметил, что событие target, checked не определено в обработчике; как мне получить доступ к проверенному атрибуту в объекте события?   -  person jaimefps    schedule 18.08.2017
comment
есть также сообщение об этом уже на SO stackoverflow.com/questions/27784212/   -  person webdeb    schedule 18.08.2017

Ответы (2)


arrow_upward
0
arrow_downward

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

Более того, вы должны полагаться только на свое состояние, а не на смесь e.target.checked & state.

class Radio extends Component {
  state = {}

  render() {
    return <input
      type="radio"
      checked={this.state.checked}
      onClick={e => this.setState({
        checked: !this.state.checked
      })}
    />
  }
}


<input type="radio" />

person webdeb    schedule 18.08.2017
comment
Я использую redux, я не хочу использовать локальное состояние, я отвечаю на состояние Store, полученное через реквизиты. Я работаю с переключателями на основе этой статьи: react.tips/radio-buttons-in -reactjs. Все работает нормально с радио-кнопками для вопросов с одним ответом, но теперь я пытаюсь создать форму, которая позволяет одновременно выбирать несколько кнопок. - person jaimefps; 18.08.2017
comment
Радиокнопки не подходят, если у вас несколько элементов .. флажки подходят для этого случая - person webdeb; 18.08.2017
comment
Ой! ха-ха, не поняла. спасибо - person jaimefps; 18.08.2017

arrow_upward
0
arrow_downward

Я нашел обходной путь:

используйте атрибут 'value' для хранения той же информации, которую я храню под атрибутом 'checked', с массивом, который имеет значение кнопки и логическое значение проверенной логики; например, значение = [логическое, btn_value]

затем обратитесь к атрибуту value в обработчике событий. значение поступает как полная строка, поэтому я просто разделяю его запятой и работаю оттуда.

это взломано, но это сработало.

person jaimefps    schedule 18.08.2017