Javascript 如何在复选框和单选按钮中设置默认值？

我正在制作一个简单的react应用程序，其中有一些默认值要设置为输入字段

这里有三个输入字段

-> Textbox   = UserName

-> Checkbox  = Relocation

-> Radio     = ContactMode

它们各自的价值观是

 {
    UserName: "Test User",
    Relocation: true,
    ContactMode: "Email",
 }

工作片段：

const{useState}=React；
常量应用=（）=>{
常量[formValue，setFormValue]=useState({
用户名：“测试用户”，
搬迁：是的，
联系方式：“电子邮件”，
});
常量handleInputChange=（e）=>{
常量{name，value}=event.target；
setFormValue({
…形成价值，
[名称]：值，
});
};
常量提交数据=（）=>{
console.log（formValue）
}
返回(
用户名




愿意搬迁吗？




接触方式
{" "}
电子邮件
{" "}
正文
{" "}
二者都




提交
);
};
render（，document.getElementById（“根”））
您需要使用checked


const{useState}=React；
常量应用=（）=>{
常量[formValue，setFormValue]=useState({
用户名：“测试用户”，
搬迁：是的，
联系方式：“电子邮件”，
});
常量handleInputChange=（e）=>{
常量{name，value}=event.target；
setFormValue({
…形成价值，
[名称]：值，
});
};
常量handleCheckedChange=（e）=>{
const{name，checked}=event.target；
setFormValue({
…形成价值，
[姓名]：选中，
});
}
常量提交数据=（）=>{
console.log（formValue）
}
返回(
用户名




愿意搬迁吗？




接触方式
{" "}
电子邮件
{" "}
正文
{" "}
二者都




提交
);
};
render（，document.getElementById（“根”））
复选框的等效
值
属性为
已选中
：

<input
          type="checkbox"
          name="Relocation"
          checked={formValue.Relocation}
          onChange={handleInputChange}
        />


const{useState}=React；
常量应用=（）=>{
常量[formValue，setFormValue]=useState({
用户名：“测试用户”，
搬迁：是的，
联系方式：“电子邮件”，
});
常量handleInputChange=（e）=>{
常量{name，value}=event.target；
setFormValue({
…形成价值，
[名称]：值，
});
};
常量提交数据=（）=>{
console.log（formValue）
}
返回(
用户名




愿意搬迁吗？




接触方式
{" "}
电子邮件
{" "}
正文
{" "}
二者都




提交
);
};
render（，document.getElementById（“根”））；
这是否回答了您的问题？无法取消选中该复选框。。如果我取消选中该复选框，则需要将false存储在重新定位中..无法在
handleInputChange
本身中处理它吗？无法在
handleInputChange
本身中处理它吗？
    const { useState } = React;

const App = () => {
  const [formValue, setFormValue] = useState({
    UserName: "Test User",
    Relocation: true,
    ContactMode: "Email",
  });

  const handleInputChange = (e) => {
    const { name, value } = event.target;
    setFormValue({
      ...formValue,
      [name]: value,
    });
  };
  
  const submitData = () => {
    console.log(formValue)
  }

  return (
    <div>
      <form>
        <label> User Name </label>
        <input
          type="text"
          name="UserName"
          value={formValue.UserName}
          onChange={handleInputChange}
        />
        <br />
        <br />
        <label> Willing to relocate? </label>
        <input
          type="checkbox"
          name="Relocation"
          value={formValue.Relocation}
          onChange={handleInputChange}
        />
        <br />
        <br />
        <label> Contact Mode </label>
        <input
      type="radio"
      name="ContactMode"
      value={`Email`}
      onChange={handleInputChange}
      checked={formValue.ContactMode==="Email"}
    />{" "}
    Email
    <input
      type="radio"
      name="ContactMode"
      value={`Text`}
      onChange={handleInputChange}
      checked={formValue.ContactMode==="Text"}
    />{" "}
    Text
    <input
      type="radio"
      name="ContactMode"
      value={`Both`}
      onChange={handleInputChange}
      checked={formValue.ContactMode==="Both"}
      
    />{" "}
    Both
    <br />
    <br />
        <button type="button" onClick={submitData}> Submit </button>
      </form>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));