如何在反應中設置單選按鈕的默認值？

Question

我有一個輸入表單，我獲取了道具，並將它們映射到輸入組件，但對於單選按鈕，我無法在加載時設置默認值。 任何解決方案？

updateForm.jsx 現在如何根據員工角色管理員或代表選擇默認單選按鈕？

更新表單.jsx

const updateForm = props => {
const { sortedEmployees } = props.location.state;

 const [updateFormData, handleUpdateForm] = useState({
    emp_name: sortedEmployees.emp_name,
    emp_phone: sortedEmployees.emp_phone,
    emp_role: sortedEmployees.emp_role
  });
  const { emp_name, emp_phone, emp_role } = updateFormData;

  const handleEmployeeForm = e => {
    handleUpdateForm({ ...updateFormData, [e.target.name]: e.target.value });
  };

     <form className="w-full" onSubmit={e => handleUpdateEmployee(e)}>
        <label className="label ml-2" htmlFor="Name">
          Name
        </label>
        <input
          className="input ml-2 mb-2"
          type="text"
          name="emp_name"
          value={emp_name}
          id="Name"
          required
          placeholder="Name"
          onChange={e => handleEmployeeForm(e)}
        />
        <label className="label ml-2" htmlFor="Phone">
          Phone Number
        </label>
        <input
          className="input ml-2 mb-2"
          type="text"
          pattern="[0-9]*"
          name="emp_phone"
          value={emp_phone}
          id="Phone"
          required
          placeholder="Phone number"
          onChange={e => handleEmployeeForm(e)}
        />
        <span className="ml-2 mr-4 font-semibold">Role</span>
        <label htmlFor="admin">Admin</label>
        <input
          className="ml-2 mr-2"
          type="radio"
          name="emp_role"
          value="admin"
          id="admin"
          onChange={e => handleEmployeeForm(e)}
        />
        <label htmlFor="representative">Representative</label>
        <input
          className="ml-2 mr-2"
          type="radio"
          name="emp_role"
          value="representative"
          id="representative"
          onChange={e => handleEmployeeForm(e)}
        />
        <button type="submit" value="submit" className="button is-primary ml-2">
          Update
        </button>
      </form>
}

Answer 1

你應該在你的單選按鈕上使用checked ：

<label htmlFor="admin">Admin</label>
<input
  className="ml-2 mr-2"
  type="radio"
  name="emp_role"
  checked={emp_role === 'admin'}
  value="admin"
  id="admin"
  onChange={e => handleEmployeeForm(e)}
/>
<label htmlFor="representative">Representative</label>
<input
  className="ml-2 mr-2"
  type="radio"
  name="emp_role"
  value="representative"
  checked={emp_role === 'representative'}
  id="representative"
  onChange={e => handleEmployeeForm(e)}
/>

Answer 2

您可以使用 state 並為其設置默認值，然后在您的收音機輸入中使用。

function Example() {
  const [gender, setGender] = useState('male');
  return (
    <div>
      <input
        checked={gender === "male"}
        type="radio"
        id="male"
        name="gender"
        value="male"
        onChange={e => setGender(e.currentTarget.value)}
      />
      <label htmlFor="male">Male</label>
      <br />
      <input
        checked={gender === "female"}
        type="radio"
        id="female"
        name="gender"
        value="female"
        onChange={e => setGender(e.currentTarget.value)}
      />
      <label htmlFor="female">Female</label>
      <br />
    </div>
  );
}