Question

我正在尝试根据React.js中单选按钮的'checked'属性来处理事件。我希望按钮允许选择多个值，所以我删除了'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'],
...
}

现在，我还有一个react类，它有一个方法来操作占用数组中的值，响应是否已经检查了被舔的单选按钮：

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中调用“已检查”逻辑，该逻辑在RadioButton组件的checked属性中返回一个布尔值时，它会按预期出现（如果它在数组中，则为false）。但它总是在处理按钮的类方法中出现checked = undefined。

Answer 1

您也无法取消选中HTML中的单选按钮。您必须使用props或state来控制checked属性：

更重要的是，你应该只依靠你的状态，而不是混合，e.target.checked＆amp;状态。

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" />

Answer 2

我找到了解决方法：

使用'value'属性存储我在'checked'属性下存储的相同信息，其中一个数组具有按钮的值和检查的逻辑布尔值;例如，value = [boolean，btn_value]

然后

访问事件处理程序中的'value'属性。值以完整字符串的形式到达，所以我只是将其拆分为逗号并从那里开始工作。

这很黑，但它确实有用。

在“已检查”属性上反应单选按钮事件

2 个答案: