Question

关于我以前的question，我这样做是为了存储正确的状态：

if (value === 'checkpoint')
{
  if (checked1)
  {
    this.setState({checked1 : false})
    localStorage.setObject('checked1', false)
  }
  else
  {
    this.setState({checked1 : true})
    localStorage.setObject('checked1', true)
  }
}

现在我有多个复选框（让我们说我有四个）。一个用于所有复选框，另外三个用于类别。我希望我的应用程序检测何时选中三个类别复选框，并自动检查ALL复选框。取消选中任何类别复选框时，ALL复选框将取消选中。

我试过这段代码：

  if (checked1 && checked2 && checked3) {
    this.setState({checkedAll: true})
  } else {
    this.setState({checkedAll: false})
  }

但是另外3个复选框（checked1, checked2, checked3）将始终获得以前的状态。

如何才能获得正确的状态，以便checkedAll正常运行？

Answer 1

您应该避免在setState()中使用componentDidUpdate()，因为它有时会导致代码中出现错误，并且被认为不是一种好习惯（例如https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-did-update-set-state.md所以如果您使用airbnb规则进行配置你的伴侣，你也会遇到一些掉落警告）。

你不能让所有四个复选框控制输入如下：

      <input
        type="checkbox"
        id="ch1"
        value="1"
        checked={this.state.ch1}
        onChange={this.onCheckboxChange}
      /> Ch1

      <input
        type="checkbox"
        id="ch2"
        value="1"
        checked={this.state.ch2}
        onChange={this.onCheckboxChange}
      /> Ch2

      <input
        type="checkbox"
        id="ch3"
        value="1"
        checked={this.state.ch3}
        onChange={this.onCheckboxChange}
      /> Ch3

      <input
        type="checkbox"
        id="chall"
        value="1"
        checked={
          this.state.ch1
          && this.state.ch2
          && this.state.ch3
        }
        onChange={this.onCheckboxChange}
      /> Ch all

然后在onCheckboxChange（或任何名称）中执行以下操作：

const { id } = e.target;

if (id === 'chall') {
  if (e.target.checked) {
    this.setState({
      ch1: true,
      ch2: true,
      ch3: true,
    });
    return;
  }

  this.setState({
    ch1: false,
    ch2: false,
    ch3: false,
  });
}

this.setState({
  [id]: e.target.checked,
});

Answer 2

我认为更多的是在生命周期中放置此代码的位置。 componentDidUpdate似乎是一个合理的候选人。例如：

componentDidUpdate () {
  const { checked1, checked2, checked3 } = this.state
  const checkedAll = checked1 && checked2 && checked3
  if (checkedAll === this.state.checkedAll) {
    return
  }
  this.setState({ checkedAll })
}

换句话说，只要这些方框都更新了状态，checkAll自然也会如此。

Answer 3

如果使用this.setState（{new state}，//执行某些操作}），正在执行的任何操作都将获得最新的state值。

复制并粘贴此组件并查看控制台以查看其是否正在接收正确的状态

import React, { Component } from 'react'

class Menu extends Component {
  state = {
    checkAll: false,
    check1: false,
    check2: false,
    check3: false
  }

  handleChange = () => {
    const all = (this.salmon.checked && this.tuna.checked && this.snapper.checked)
    if (all) {
      this.setState({
        checkAll: true,
        check1: this.salmon.checked,
        check2: this.tuna.checked,
        check3: this.snapper.checked
      }, () => {
        this.all.checked = true
        console.log('Most current state', JSON.stringify(this.state))
      })
    } else {
      this.setState({
        checkAll: false,
        check1: this.salmon.checked,
        check2: this.tuna.checked,
        check3: this.snapper.checked
      }, () => {
        this.all.checked = false
        console.log('Most current state', JSON.stringify(this.state))
      })
    }
  }

  handleAll = () => {
    this.setState({
      checkAll: true,
      check1: true,
      check2: true,
      check3: true
    }, () => {
      this.salmon.checked = true
      this.tuna.checked = true
      this.snapper.checked = true
      console.log('Most current state', JSON.stringify(this.state))
    })
  }

  render() {
    return (
      <div>
        <h1>Select Options</h1>
        <form>
          <span>
            Select All:
            <input
              onChange={this.handleAll}
              type="checkbox"
              value={this.state.checkAll}
              ref={all => this.all = all}
            />
          </span>
          <ul>
            <li>
              <input
                onChange={this.handleChange}
                type="checkbox"
                value={this.state.check1}
                ref={salmon => this.salmon = salmon}
              />
              Salmon
            </li>
            <li>
              <input
                onChange={this.handleChange}
                type="checkbox"
                value={this.state.check2}
                ref={tuna => this.tuna = tuna}
              />
              Tuna
            </li>
            <li>
              <input
                onChange={this.handleChange}
                type="checkbox"
                value={this.state.check3}
                ref={snapper => this.snapper = snapper}
              />
              Snapper
            </li>
          </ul>
        </form>
      </div>
    )
  }
}

export default Menu

始终在React应用

3 个答案: