react toggle在初始状态改变时返回错误的状态。

我想切换我的状态 rememberMe 当用户检查 rememberMe 复选框。

初始状态为 false当我点击时,我想让它变成 true 这样我就可以设置另一个条件,然而这不会发生。

这个道具 rememberMe 第一次点击时保持false,第二次点击时变为true。

有人知道这是为什么吗?

代码。

state = {
orderForm: {
  email: {
        elementType: "input-email",
        elementConfig: {
          type: "email",
          placeholder: "Your E-Mail"
        },
        value: this.props.email || "",
        validation: {
          required: true
        },
        valid: this.props.email ? true : false,
        touched: false
      },
},
 rememberMe: false

}

输入

   return (
            <Input
              inputtype={formElement.config.elementType}
              key={formElement.id}
              elementType={formElement.config.elementType}
              elementConfig={formElement.config.elementConfig}
              value={formElement.config.value}
              invalid={!formElement.config.valid}
              shouldValidate={formElement.config.validation}
              touched={formElement.config.touched}
              changed={event => this.inputChangedHandler(event, formElement.id)}
              rememberMe={this.state.rememberMe}
              checkboxChanged={this.handleCheckboxChange}
            />
          );

函数来改变切换。

  handleCheckboxChange = event => {
    this.setState((previousState) => {
      return {rememberMe: !previousState.rememberMe}
    });
    console.log(this.state.rememberMe);

    // setting local storage for email
    const email = this.state.orderForm.email.value;
    const rememberMe = this.state.rememberMe;
    localStorage.setItem("rememberMe", rememberMe);
    localStorage.setItem("email", rememberMe ? email : "");
  };```

解决方案:

在react中,状态更新是异步的。所以当做 this.setState react并不能保证它能立即更新状态。这就是为什么 this.state.rememberMe 在 handleClick 函数中不会有新的值。最好的方法是使用当前状态来确定值并使用它。

所以在handleClick函数中你可以这样做。

  handleCheckboxChange = event => {
    const rememberMe = !this.state.rememberMe; // storing the required value in a variable
    this.setState((previousState) => {
      return {rememberMe: !previousState.rememberMe}
    });

    // setting local storage for email
    const email = this.state.orderForm.email.value;
    localStorage.setItem("rememberMe", rememberMe);
    localStorage.setItem("email", rememberMe ? email : "");
  };```

请看下面的setState 文件.

给TA打赏
共{{data.count}}人
人已打赏
未分类

Pyodbc 调用带参数的存储过程。

2022-9-13 13:01:35

未分类

如何为Telegram API发送多格式数据的文件?

2022-9-13 13:01:37

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索