在反应挂钩中使一个为真而其他反对为假

Question

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

the same thing needs to do with other states too , (option2,option3.....)

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>
)

}

Answer 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>
)

Answer 2

我写的正是 Prakash 的回答...似乎是最简单的方法...

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

Answer 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>
  );
}

在反应挂钩中使一个为真而其他反对为假

Make one true while others in object to false in react hooks

javascript

arrays

reactjs

react-hooks

use-state