javascript - 如果单击复选框， react 如何将复选框从 true 更改为 false

Question

正如标题所说，我想在单击时将复选框的值从 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>
);

Answer 1

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

此外，您也不会重新调整更新的值或在状态中设置它。按照以下示例所示执行此操作。此外，在您的 WeatherInfo 组件中，您已将选中状态设置为 false，因此它将始终保持 false。您应该收到该 Prop 并将检查状态设置为此 Prop 。

还要确保将初始状态设置为 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>
);