在“选中”属性上反应单选按钮事件答案

【问题标题】：React Radio Button event on "checked" attribute在“选中”属性上反应单选按钮事件
【发布时间】：2017-08-19 04:51:55
【问题描述】：

我正在尝试根据 React.js 中单选按钮的“已检查”属性来处理事件。我希望按钮允许选择多个值，因此我删除了似乎不允许多选的“名称”属性。

基本单选按钮组件看起来像

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

【问题讨论】：

您确定从数组中删除了该项吗？
我正在尝试首先访问事件对象中的选中属性。那是我还没能做到的；或者至少不正确：我总是在事件处理程序方法中得到 isChecked = true，即使我在单选按钮组件中得到 false
请尝试！否定 if 条件中的值
因为单选按钮通常不会像复选框那样取消选中
SO stackoverflow.com/questions/27784212/…上也有一篇关于这个的帖子

标签： reactjs events radio-button checked

【解决方案1】：

您也不能取消选中 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
      })}
    />
  }
}

&lt;input type="radio" /&gt;

【讨论】：

我正在使用redux，我不想使用本地状态，我响应通过道具接收的存储状态。我正在使用基于这篇文章的单选按钮：react.tips/radio-buttons-in-reactjs。对于具有单一答案的问题，单选按钮一切正常，但现在我正在尝试构建一个允许同时选择多个按钮的表单。
如果您有多个项目，则单选按钮不适合。复选框适合这种情况
哦！哈哈，那部分没看懂。谢谢

【解决方案2】：

我找到了解决方法：

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

然后访问事件处理程序中的“值”属性。该值作为一个完整的字符串到达，所以我只是用逗号分割它并从那里开始工作。

这很hacky，但它确实有效。

【讨论】：