Question

我无法使我的reactjs组件反映复选框上状态的实际变化。任何人都可以帮助或指出我的以下代码出了什么问题。

这是我的状态

 state = {
    data: {
      name: "",
      address: "",
      city: "",
      country: "",
      mobile_number: "",
      description: "",
      has_conference: false,
      star_rating: "",
    },
    errors: {},
  };

此句柄复选框方法

toggleChange = () => {
    this.setState({
      has_conference: !this.state.data["has_conference"],
    });
  };

最后是渲染方法中的复选框代码

                <label>
                <input
                  type="checkbox"
                  has_conference={this.state.data["has_conference"]}
                  onChange={this.toggleChange}
                />
                Conferencing
              </label>

Answer 1

您的代码中有两点需要纠正。

1：在toggleChange中，您不会更改this.state.data.has_conference，但会更改在初始状态下不存在的this.state.has_conference。要更改this.state.data.has_conference，您需要在toggleChange函数中执行以下操作：

<!DOCTYPE html>
<html>
    <link rel="stylesheet" href="CSS/style.css">
<head>
        <title>TJ</title>
</head>
<body>
    <header>
        <div class = TopRow>
        <h1>
           <a href="https://www.google.com">Tj</a>
        </h1>
        <!-- edits made above -->
        </div>
    </header>
    <div class = 'Image1Nav'>
        <a href="https://www.google.com">
        <img class="Image1" src="Images/noimg.jpg" alt="noimg.jpg">
        </a>
        <p>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Provident quidem magni impedit totam esse sapiente, molestias exercitationem tenetur nihil libero, consectetur perferendis illum placeat hic. Ipsum rem incidunt omnis sed.
        </p>
    </div>
</body>
</html>

2：在其中，您需要将this.state.data.has_conference值绑定到checked属性。在代码中，您需要编写：

let data = this.state.data
data.has_conference = !data.has_conference
this.setState({data})

希望获得帮助。

复选框不反映ReactJS状态的变化

1 个答案: