Question

每次复选框切换为true时，我都希望更新数组。使用此当前代码，如果我单击一个复选框，它将记录它是错误的。即使我刚刚更新了州。 setState只需要一些时间，就像API调用一样吗？这对我来说没有意义。

import React, {Component} from 'react';

class Person extends Component {

  constructor(props) {
    super(props);

    this.state = {
      boxIsChecked: false
    };

    this.checkboxToggle = this.checkboxToggle.bind(this);
  }

  checkboxToggle() {
    // state is updated first
    this.setState({ boxIsChecked: !this.state.boxIsChecked });
    console.log("boxIsChecked: " + this.state.boxIsChecked);
    if (this.state.boxIsChecked === false) {
      console.log("box is false. should do nothing.");
    }
    else if (this.state.boxIsChecked === true) {
      console.log("box is true. should be added.");
      this.props.setForDelete(this.props.person._id);
    }

  }

    render() {
        return (
          <div>
            <input type="checkbox" name="person" checked={this.state.boxIsChecked} onClick={this.checkboxToggle} />
            {this.props.person.name} ({this.props.person.age})
          </div>
        );
    }
}

export default Person;

我尝试过onChange而不是onClick。我觉得我已经按照here和here中关于基本成分制定的建议进行了阅读。我是否正在使用Redux来影响其他任何值？有没有办法只读取复选框的内容，而不是试图控制它？（复选框本身工作正常，DOM更新，检查或不正确。）

Answer 1

我知道此线程已得到答复，但我也对此有解决方案，您看到复选框未使用setState的提供的值进行更新，我不知道此问题的确切原因，但这是解决方案

<input
  key={Math.random()}
  type="checkbox"
  name="insurance"
  defaultChecked={data.insurance}
 />

通过提供随机键值可以重新渲染复选框，并更新复选框的值，这对我有用。我也正在使用钩子，但是它应该可以用于基于类的实现。

参考：https://www.reddit.com/r/reactjs/comments/8unyps/am_i_doing_stupid_or_is_this_a_bug_checkbox_not/

Answer 2

确实没有立即反映出setState（）：

Read here in the docs：

setState（）将对组件状态的更改排入队列并告知React   这个组件及其子组件需要重新呈现   更新状态。这是用于更新用户的主要方法   接口响应事件处理程序和服务器响应。

将setState（）视为请求而不是立即命令   更新组件。为了获得更好的感知性能，React可能会   延迟它，然后一次更新几个组件。应对   并不保证立即应用状态变化。

setState（）并不总是立即更新组件。有可能   批量或推迟更新，直到稍后。这使得阅读this.state   在调用setState（）之后发生了潜在的陷阱。相反，使用   componentDidUpdate或setState回调（setState（更新程序，   回调）），其中任何一个都保证在更新后触发   已经应用。如果需要根据以前的状态设置状态   state，请阅读下面的updater参数。

setState（）将始终导致重新渲染，除非   shouldComponentUpdate（）返回false。如果是可变对象   使用和条件渲染逻辑无法实现   shouldComponentUpdate（），仅在新状态时调用setState（）   与以前的状态不同，将避免不必要的重新渲染。

and here some experiments

所以抓住事件并检查它可能会更好，而不是依赖于this.setState() 这样的事情：

handleChange: function (event)  {
   //you code
    if (event.target.checked) {
      console.log("box is true. should be added.");
      this.props.setForDelete(this.props.person._id);
    }

  }

和

    render() {
            return (
              <div>
                <input type="checkbox" name="person" checked={this.state.boxIsChecked} 
                   onChange={this.handleChange.bind(this)}/>
                {this.props.person.name} ({this.props.person.age})
              </div>
            );
        }

Answer 3

在调用setState（）之后，您无法访问state的更新值。

如果你想用更新的状态值做事，你可以这样做。即在setState()内部回调函数

     checkboxToggle() {
        // state is updated first
        this.setState({ boxIsChecked: !this.state.boxIsChecked },()=>{

        console.log("boxIsChecked: " + this.state.boxIsChecked);
        if (this.state.boxIsChecked === false) {
          console.log("box is false. should do nothing.");
        }
        else if (this.state.boxIsChecked === true) {
          console.log("box is true. should be added.");
          this.props.setForDelete(this.props.person._id);
        }


});

Answer 4

我来到这里试图弄清楚为什么使用HTM标记的模板库呈现的复选框不起作用。

return html`
  ...
  <input type="checkbox" checked=${state.active ? "checked" : null} />
  ...
`;

事实证明，我只是在尝试使用该三元运算符。效果很好：

return html`
  ...
  <input type="checkbox" checked=${state.active} />
  ...
`;

Answer 5

反应解决方案：

HTML：

<input type="checkbox" ref={checkboxRef} onChange={handleChange}/>

JS：

const checkboxRef = useRef("");
  const [checkbox, setCheckbox] = useState(false);
  const handleChange = () => {
    setCheckbox(checkboxRef.current.checked);
  };

现在您的真/假值存储在复选框变量中

Answer 6

展开无新手回答；什么对我有用：

从 onChange Event-Listener 中删除 preventDefault() 但这对我来说并不合适，因为我只想做出反应来更新值。它可能并不适用于所有情况，例如 OP。
在键中包含选中的值，如 key={"agree_legal_checkbox" + legalcheckboxValue} checked={legalcheckboxValue}

我从新手的答案中得到了这两个解决方案，但是有一个 math.random 密钥只是感觉不对。使用checked 的值只会在checked 值也发生变化时才会改变键。

（没有足够的声誉来简单地将此作为评论发布，但仍然想分享）

React Checkbox不会更新

6 个答案: