javascript - 选中所有复选框，并取消选中是否在没有 jQuery 的 React 中取消选中它们

Question

我想选择所有复选框。但是，如果用户取消选择任何复选框，我也想取消选中“全选”复选框。

在下面给出的示例中，如何实现这一点？

现场演示:https://react-f3tcbc.stackblitz.io

现场编辑:https://stackblitz.com/edit/react-f3tcbc

我查看的一些示例将 checked 称为 items 中的 boolean 参数。然而，我的 items 对象来自 ajax 响应作为 json 并且它们没有值，例如 checked。

我想用 React 的方式来做这件事。不是 jQuery。有什么想法吗？

Answer 1

一种解决方法是添加一个额外的属性，例如isChecked 到您从网络请求中获取的数据，并使用它来控制所有复选框。

示例

const posts = [
  {
    id: 1,
    name: "Text 1"
  },
  {
    id: 2,
    name: "Text 2"
  },
  {
    id: 3,
    name: "Text 3"
  }
];

class App extends React.Component {
  state = {
    name: "React",
    posts: [],
    isAllChecked: false
  };

  componentDidMount() {
    setTimeout(() => {
      this.setState({
        posts: posts.map(post => ({ ...post, isChecked: false }))
      });
    }, 1000);
  }

  handleSelect = id => {
    this.setState(prevState => {
      const posts = prevState.posts.map(post =>
        post.id === id ? { ...post, isChecked: !post.isChecked } : post
      );
      const isAllChecked = posts.every(post => post.isChecked);

      return { posts, isAllChecked };
    });
  };

  handleSelectAll = () => {
    this.setState(prevState => {
      const isAllChecked = !prevState.isAllChecked;
      const posts = prevState.posts.map(post => ({
        ...post,
        isChecked: isAllChecked
      }));

      return { posts, isAllChecked };
    });
  };

  render() {
    const { posts, isAllChecked } = this.state;

    return (
      <div>
        {posts.map(fx => (
          <TableItem
            key={fx.id}
            id={fx.id}
            name={fx.name}
            checked={fx.isChecked}
            onChange={() => this.handleSelect(fx.id)}
          />
        ))}
        <div>
          <label>
            <input
              type="checkbox"
              checked={isAllChecked}
              onChange={this.handleSelectAll}
            />
            Select all
          </label>
        </div>
      </div>
    );
  }
}

class TableItem extends React.Component {
  render() {
    const { checked, onChange, name } = this.props;

    return (
      <tr>
        <td>
          <input type="checkbox" checked={checked} onChange={onChange} />
        </td>
        <td>{name}</td>
      </tr>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>