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块，则两者都将被执行，因此即使第一个执行第二个，也会看到更新的结果并更改再来一次。

此外，您不会重新调整更新的值或将其设置为状态。这样做，如下例所示。同样在您的WeatherInfo组件中，您已将选中状态设置为false，因此它始终保持为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>
);

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

1 个答案: