如果单击复选框，反应如何将复选框从 true 更改为 false答案

【问题标题】：React how to change checkbox from true to false if checkbox clicked如果单击复选框，反应如何将复选框从 true 更改为 false
【发布时间】：2017-07-22 07:44:08
【问题描述】：

正如标题所说，我想在单击时将复选框的值从 true 更改为 false 或从 false 更改为 true。我不知道如何改变它。我假设是“setState”，但我不确定到底是什么

toggleCheckboxChange(e) {

let isState = e.target.value;


if(isState != false) {
   isTrue = isState
}
if(isState == false) {
  isTrue = isState;
}
  //change state of checkbox
}
  render() {

weatherInfo = <WeatherInfo
      nameOfCity={nameOfCity}
      weatherDescription={weatherDescription}
      windSpeed={windSpeed}
      temperature={temperature}
      maxTemperature={maxTemperature}
      minTemperature={minTemperature}
      myPokemon={myPokemon}
      change={this.toggleCheckboxChange.bind(this)}
  />;


const WeatherInfo = (props) => (
<div>
    <ul>
        <li>{props.nameOfCity}</li>
        <li>{props.weatherDescription}</li>
        <li>{props.windSpeed} m/s </li>
        <li>{props.temperature} °C</li>
        <li>{props.maxTemperature}°C</li>
        <li>{props.minTemperature}°C</li>

        <input
            type="checkbox"
            value={false}
            onChange={(e)=>props.change(e)}
        />
    </ul>
</div>
);

【问题讨论】：

标签： javascript reactjs checkbox ecmascript-6

【解决方案1】：

您切换复选框选中状态的方式不正确，因为如果您使用两个 if 块，两者都将被执行，因此即使第一个执行第二个也会看到更新的结果并更改计算再次。

此外，您不会重新调整更新的值或将其设置为状态。如下例所示。同样在您的WeatherInfo 组件中，您已将检查状态设置为false，因此它将一直保持为假。您应该会收到道具并将选中状态设置为此道具。

还要确保将初始状态设置为 true 或 false

toggleCheckboxChange(e) {

let isState = e.target.value;

if(isState == false) {
  isTrue = true;
}
else {
   isTrue=false;
}
  this.setState({checkedState: isTrue})
}
  render() {

weatherInfo = <WeatherInfo
      nameOfCity={nameOfCity}
      weatherDescription={weatherDescription}
      windSpeed={windSpeed}
      temperature={temperature}
      maxTemperature={maxTemperature}
      minTemperature={minTemperature}
      myPokemon={myPokemon}
      checkedState={this.props.checkedState}
      change={this.toggleCheckboxChange.bind(this)}
  />;


const WeatherInfo = (props) => (
<div>
    <ul>
        <li>{props.nameOfCity}</li>
        <li>{props.weatherDescription}</li>
        <li>{props.windSpeed} m/s </li>
        <li>{props.temperature} °C</li>
        <li>{props.maxTemperature}°C</li>
        <li>{props.minTemperature}°C</li>

        <input
            type="checkbox"
            value={props.checkedState}
            onChange={(e)=>props.change(e)}
        />
    </ul>
</div>
);

【讨论】：