反应复选框不更新答案

【问题标题】：React Checkbox Does Not Update反应复选框不更新
【发布时间】：2017-09-14 13:28:46
【问题描述】：

我想在每次将复选框切换为 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 会更新它是否被选中。）

【问题讨论】：

您的代码 sn-p 根本没有使用 Redux。它正在使用常规的 React 状态。
是的，我只是在检查是否存在可能导致某些问题的副作用。我也在组件中使用了一些 Redux 操作。

标签： javascript reactjs checkbox redux react-redux

【解决方案1】：

在调用 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);
        }


});

【讨论】：

嗯，这是有道理的。我不知道为什么我没有想到 setState 可能会进行回调。我们可以使用 Promise 你知道吗？
为什么要使用promise，使用promise想要达到什么目的？ SetState 回调将做你需要的。对吗？
我只是好奇。我更倾向于使用承诺。 ;P
React 的 setState() 不返回承诺。坚持回调的。
@GabrielKunkel 你可以wrap it in a promise,

【解决方案2】：

setState() 确实没有马上反映：

Read here in the docs:

setState() 将组件状态的更改排入队列并告诉 React 这个组件及其子组件需要重新渲染更新状态。这是您用来更新用户的主要方法响应事件处理程序和服务器响应的接口。

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

setState() 并不总是立即更新组件。有可能批处理或推迟更新。这使得阅读 this.state 就在调用 setState() 之后，这是一个潜在的陷阱。相反，使用 componentDidUpdate 或 setState 回调（setState(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>
            );
        }

【讨论】：

非常感谢。这可能是一个基本问题，但是您是否可以将任何资源链接到有关捕获或使用事件的讨论，例如检查或取消检查？我宁愿只观察复选框是否被选中，而不必跟踪状态值。
@GabrielKunkel 我编辑了代码 sn-p。我就是这样做的。请尝试。但是你仍然需要使用setState来反映复选框中的变化，或者完全移除checked属性。
@GabrielKunkel 这个链接可能会有所帮助，你也可以有一堆关键词可以在进一步的研究中使用：help.dottoro.com/ljihlcqe.php
很好的答案，很好的解释。谢谢...！

【解决方案3】：

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

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

通过给出 random 的键值，复选框被重新渲染并更新复选框的值，这对我有用。我也在使用钩子，但它应该适用于基于类的实现。

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

【讨论】：

这显然是最好的解决方案。 +1
这个答案对我帮助很大。

【解决方案4】：

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

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

事实证明，我对那个三元运算符太努力了。这工作正常：

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

【讨论】：

【解决方案5】：

反应解决方案：

HTML：

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

JS：

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

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

【讨论】：

【解决方案6】：

扩大没有新手的答案；什么对我有用：

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

我从新手的回答中得到了这两种解决方案，但是使用 math.random 键感觉不对。使用checked的值会导致key只有在checked的值改变时才会改变。

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

【讨论】：