在反应钩子中使一个为真，而其他人则反对为假

Question

What is the best to make (option 1: true ) and at the same time need to change others state to 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

If your state only consist options variables then

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

I was writing the exact thing as Prakash's answer... Seems to be the simplest way...

although I like to write my constants with caps so INITIAL_STATE rather than initialState #personalPreferences

Answer 3

I'm not entirely sure why you wouldn't want to use a radio button to do this but heres some code which works for your usecase.

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