如何正确更改复选框？

Question

更改复选框值的正确方法是什么？

选项1

import React, { useState } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  const [x, setX] = useState(false);

  const soldCheckbox = ({ target: { checked } }) => {
    console.log(x, checked);
    setX(checked);
  };
  return (
    <div>
      <input type="checkbox" checked={x} onChange={soldCheckbox} />
    </div>
  );
}

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

选项2

import React, { useState } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  const [x, setX] = useState(false);
  console.log(x);
  return (
    <div>
      <input type="checkbox" checked={x} onChange={() => setX(!x)} />
    </div>
  );
}

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

实际上，我认为没有区别，但是我只是想听听不同的意见。也许我不知道的事情，或者对此问题可能有其他解决方案。

Answer 1

两种方式几乎相同，但是第一种选择实际上是多余的，让我们分析一下原因：

第一种和第二种方法都在实现controlled组件

这意味着您正在提供一个值和一种更改它的方法，因此从组件中提取了更新和控制值的责任。

但是为什么第一种方法是多余的呢？

实际上，您实际上不需要从中读取信息，e.target.checked因为它总是反映本地状态x，因此无需e.target.checked通过执行以下操作来读取和反转它：setX(!e.target.checked)因为x和e.target.checked将始终相同。

注意事项

即使是细做onClick={e => parentHandler(e)}的内嵌式（箭头功能），你就要小心了，它传递这样一个输入不会造成任何问题，但如果要传递到子组件实现React.memo或PureComponent例如，这将实际上每次都重新渲染组件，导致始终创建该函数的新实例（签名相同，但是浅比较将始终返回false，因为它们是不同的实例），因此出于优化原因，始终最好通过以下方式传递道具：<Child onClick={this.clickHandler} id={item.id} />并针对孩子：onClick={() => this.props.onClick(this.props.id)}而不只是：<Child onClick={e => this.onClick(item.id)} />

Answer 2

唯一的区别是干净的编码，如果您需要执行除更改状态之外的操作（例如调用 http 请求），第一种方法会更好，如果您只需要复选框工作并存储其值，第二种方法会更好。