在状态属性内的事件处理程序中设置状态

Question

我在从该状态内的事件更新状态时遇到问题。 我的意思是我有一个动态表单，并且这个表单的属性中必须有一个事件。 我用我的问题编写了一个小组件，代码在 url https://codesandbox.io/s/material-demo-4wsib

Answer 1

问题是你在状态中存储了一个带有点击处理程序的组件。 通常，您应该只存储状态中所需的最少数据。 它还使您的逻辑更容易遵循，因为您不需要在您的状态中同步组件。 使用 React 时，您应该根据状态描述您的 UI 应该是什么样子：

https://codesandbox.io/s/material-demo-vv3qw

import React from "react";
import IconButton from "@material-ui/core/IconButton";
import DeleteIcon from "@material-ui/icons/Delete";
import Visibility from "@material-ui/icons/Visibility";

export default function IconButtons() {
  const [person, setPerson] = React.useState({
    age: 25,
    isTall: false,
    name: "Ana"
  });

  return (
    <div>
      <span>{person.isTall ? "TRUE" : "FALSE"}</span>
      <IconButton
        onClick={() => {
          setPerson({
            ...person,
            isTall: !person.isTall
          });
        }}
      >
        {person.isTall ? <DeleteIcon /> : <Visibility />}
      </IconButton>
    </div>
  );
}