Question

我想在单击复选框/按钮时切换选中的属性。怎么做？

var process = [
        { id: 0, name: "ONe", status: false },
        { id: 1, name: "two", status: false },
        { id: 2, name: "three", status: false },
        { id: 3, name: "four", status: false },
        { id: 4, name: "five", status: false },
        { id: 5, name: "six", status: false },
    ];

{process.map((eachProc) => {
                            const { id, name, status } = eachProc;
                            return (
                                <>
                                    <div key={id}>
                                        <h3>{name}</h3>
                                        <input type="checkbox" checked={status} />
                                        <button
                                            onClick={() => {
                                                status = !status;
                                            }}
                                        >
                                            Select
                                        </button>
                                    </div>
                                </>
                            );
                        })}

这里的错误是状态是恒定的。

Answer 1

首先，像 process 一样使用 state：

const [process, setprocess] = useState([
    { id: 0, name: "ONe", status: false },
    { id: 1, name: "two", status: false },
    { id: 2, name: "three", status: false },
    { id: 3, name: "four", status: false },
    { id: 4, name: "five", status: false },
    { id: 5, name: "six", status: false },
]);

然后，在点击时添加一个函数hange：

  const onClick = (id) => {
    setprocess(
      process.map((item) =>
        item.id === id ? { ...item, status: !item.status } : item
      )
    );
  };

最后，将 onClick 添加到您的 button 和 checkbox：

  {process.map((eachProc) => {
    const { id, name, status } = eachProc;
    return (
      <>
        <div key={id}>
          <h3>{name}</h3>
          <input type="checkbox" checked={status} onClick={() => onClick(id)} />
          <button onClick={() => onClick(id)}>Select</button>
        </div>
      </>
    );
  })}

Answer 2

需要状态来管理您的数据，例如自爆。 see demo

-XX

在反应中切换复选框

2 个答案: