Question

我有下面的代码。但是单选按钮不会选中或取消选中点击。

const Radio = props => {
  const { name } = props;
  return (
    <div>
      <input
        id={name}
        type="radio"
        name="type"
        value={name}
        checked={this.state.selectedOption === { name }}
        onClick={this.handleChange.bind(this)}
      />
      <label for={name}>{name}</label>
    </div>
  );
};

带有handleChange事件处理程序。

handleChange = e => {
  this.setState({
    selectedOption: e.target.value
  });
};

我已经在构造函数中定义了selectedOption。

constructor(props) {
  super(props);
  this.state = {
    error: null,
    isLoaded: false,
    selectedOption: "",
    QuestionAnswer: [],
    counter: 0
  };
}

我在做什么错了？

Answer 1

您需要使用onChange处理程序而不是onClick 您可以检查我的代码here

Answer 2

通过编写this.state.selectedOption === { name }，您将检查selectedOption字符串是否等于新对象{ name: name }，这将永远是不正确的。而是直接检查字符串name。

您还希望将功能提供给onChange道具，而不是onClick道具。

checked={this.state.selectedOption === name}
onChange={this.handleChange.bind(this)}

Answer 3

在以下代码段中更新

1）

checked={this.state.selectedOption === {name} }

到

checked={this.state.selectedOption === name }

更正

{name}意味着首先进行销毁{name：name}，您可以阅读有关es6销毁here的更多信息。因此，您试图检查selectedOption是否等于name，因为有两个大括号表示这是一个新变量。您可以直接通过selectedOption === name

检查哪个问题

在控制台中运行此代码段并检查

var a = 1
var b = 1
a === b // true
a === {b} // false

2）由于您使用的是es6，因此无需绑定该方法，因此您可以详细了解here

  onClick={this.handleChange.bind(this)}

到

  onClick={this.handleChange}

const Radio = props => {
  const { name } = props;
  return (
    <div>
      <input
        id={name}
        type="radio"
        name="type"
        value={name}
        checked={this.state.selectedOption === name }
        onClick={this.handleChange}
      />
      <label for={name}>{name}</label>
    </div>
  );
};

handleChange = e => {
  this.setState({
    selectedOption: e.target.value
  });
};

constructor(props) {
  super(props);
  this.state = {
    error: null,
    isLoaded: false,
    selectedOption: "",
    QuestionAnswer: [],
    counter: 0
  };
}

reactjs-单选按钮的检查/取消检查不起作用

3 个答案: