在反应钩子中使一个为真，而另一个反对为假答案

【问题标题】：Make one true while others in object to false in react hooks在反应钩子中使一个为真，而另一个反对为假
【发布时间】：2021-01-08 16:33:29
【问题描述】：

什么是最好的（选项1：true），同时需要将其他状态更改为false

其他州也需要做同样的事情，（选项2，选项3.....）

const [state, setState] = useState({
        option1: false,
        option2: false,
        option3: false,
        option4: false,
    });

return (
    <div>
        <input
            type="checkbox"
            onClick={() => setState(state => ({ ...state, option1: true }))}
        />

        <input
            type="checkbox"
            onClick={() => setState(state => ({ ...state, option2: true }))}
        />

        <input
            type="checkbox"
            onClick={() => setState(state => ({ ...state, option3: true }))}
        />
    </div>
)

}

【问题讨论】：

为什么不使用辅助函数并将其绑定到复选框的click 事件。您可以将目标 option 作为参数传递给函数。该函数将运行一个循环并将所有option设置为false，除了目标option将设置为true。
您可以尝试使用useState({ selectedOption: 0 }); 和onClick={() => setState(state => ({ selectedOption: 1 }))} 等。如果您在其他地方需要这4 个布尔值，那么您可以从这个单一状态值中获得这些值。
另外注意：不要忘记再次单击同一个复选框会再次将其关闭，但到目前为止，无论它是打开还是关闭，您都运行相同的代码。跨度>

标签： javascript arrays reactjs react-hooks use-state

【解决方案1】：

如果您的状态仅包含 options 变量，那么

const initialState = {
        option1: false,
        option2: false,
        option3: false,
        option4: false,
    }
const [state, setState] = useState(initialState);

return (
    <div>
        <input
            type="checkbox"
            onClick={() => setState(state => ({ ...initialState, option1: true }))}
        />

        <input
            type="checkbox"
            onClick={() => setState(state => ({ ...initialState, option2: true }))}
        />

        <input
            type="checkbox"
            onClick={() => setState(state => ({ ...initialState, option3: true }))}
        />
    </div>
)

【讨论】：

【解决方案2】：

我正在写普拉卡什的答案...似乎是最简单的方法...

虽然我喜欢用大写字母写我的常量，所以 INITIAL_STATE 而不是 initialState #personalPreferences

【讨论】：

这本身不是一个答案，更适合作为上述答案下的评论，或作为问题下的评论。
真的，感谢 Peter B 的提示。还是新手 :) 等待我的 50 个代表，以便我可以正确评论

【解决方案3】：

我不完全确定您为什么不想使用单选按钮来执行此操作，但这里有一些适用于您的用例的代码。

import React, { useState } from "react";

const initialState = {
  option1: false,
  option2: false,
  option3: false,
  option4: false
};

export default function Hello({ name }) {
  const [formState, setFormState] = useState(initialState);

  function updateForm(option) {
    const newState = { ...initialState }; // create new state object from initialState, spread the initialState to keep it immutable
    newState[option] = true; // set the selected option to true
    setFormState(newState); // update state with new state
  }

  return (
    <div>
      <input
        type="checkbox"
        onClick={() => updateForm("option1")}
        checked={formState.option1}
      />

      <input
        type="checkbox"
        onClick={() => updateForm("option2")}
        checked={formState.option2}
      />

      <input
        type="checkbox"
        onClick={() => updateForm("option3")}
        checked={formState.option3}
      />

      <input
        type="checkbox"
        onClick={() => updateForm("option4")}
        checked={formState.option4}
      />
    </div>
  );
}

【讨论】：