如何将React表单单选框的字符串值转换为布尔值？

方案1：在 onChange 处理时转换 #

修改你的setFormData函数，针对status字段单独处理值的类型：

const setFormData = (e) => {
  const { name, value } = e.target;
  // 对status字段进行布尔转换，其他字段保持原有值
  const processedValue = name === 'status' ? value === 'true' : value;
  // 假设你用useState维护表单数据，这里以函数式更新为例
  setForm(prevForm => ({ ...prevForm, [name]: processedValue }));
};

方案2：在提交请求前转换 #

如果不想修改 onChange 逻辑，可以在handleSubmit里处理数据后再发送请求：

const handleSubmit = (e) => {
    e.preventDefault();
    if (Object.keys(formData).length == 0)
      return console.log("Don't Have Form Data");
    // 转换status为布尔类型
    const submitData = {
      ...formData,
      status: formData.status === 'true'
    };
    console.log(submitData);
    axios.post(url, submitData);
};

方案3：使用自定义数据属性存储布尔值 #

修改Radio输入框的属性，用data-value存储布尔值，再在 onChange 时解析：

<div className="items-center ">
  <label>Status</label>
  <div className="form-check">
    <input
      type="radio"
      onChange={setFormData}
      data-value={true}
      id="radioDefault1"
      name="status"
      className="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-green-500 checked:border-green-500 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer"
    ></input>
    <label htmlFor="radioDefault1" className="inline-block text-gray-600">
      Active
    </label>
  </div>
  <div className="form-check">
    <input
      type="radio"
      onChange={setFormData}
      data-value={false}
      id="radioDefault2"
      name="status"
      className="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-green-500 checked:border-green-500 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer"
    ></input>
    <label htmlFor="radioDefault2" className="inline-block text-gray-600">
      Inactive
    </label>
  </div>
</div>

对应的setFormData函数：

const setFormData = (e) => {
  const { name, dataset } = e.target;
  const value = name === 'status' ? JSON.parse(dataset.value) : e.target.value;
  setForm(prevForm => ({ ...prevForm, [name]: value }));
};

内容的提问来源于stack exchange，提问作者Teddy