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

Posted 2023-03-27

【中文标题】如何在复选框和单选按钮中设置默认值？

【英文标题】：How to set default value in checkbox and radio button?

【发布时间】：2021-02-18 03:35:27

【问题描述】：

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

这里有三个输入字段，

-> Textbox   = UserName

-> Checkbox  = Relocation

-> Radio     = ContactMode

它们各自的值是，

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

工作片段：

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
        />" "
        Email
        <input
          type="radio"
          name="ContactMode"
          value=`Text`
          onChange=handleInputChange
        />" "
        Text
        <input
          type="radio"
          name="ContactMode"
          value=`Both`
          onChange=handleInputChange
        />" "
        Both
        <br />
        <br />
        <button type="button" onClick=submitData> Submit </button>
      </form>
    </div>
  );
;

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.11.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>

问题：

-> 在上面的例子中，只有文本字段的值被设置，但复选框和单选按钮的值默认没有设置。

期望：

-> 所有三个输入字段都需要设置为默认值。

-> 在更改任何输入字段并单击提交按钮时，需要通过formValue 记录最新更改..

【问题讨论】：

这能回答你的问题吗？ How to set default Checked in checkbox ReactJS?

【参考方案1】：

你需要使用checked

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 handleCheckedChange = (e) => 
    const  name, checked  = event.target;
    setFormValue(
      ...formValue,
      [name]: checked,
    );
  
  
  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"
          checked=formValue.Relocation
          onChange=handleCheckedChange
        />
        <br />
        <br />
        <label> Contact Mode </label>
        <input
          type="radio"
          name="ContactMode"
          checked=formValue.ContactMode === "Email"
          value=`Email`
          onChange=handleInputChange
        />" "
        Email
        <input
          type="radio"
          name="ContactMode"
          checked=formValue.ContactMode  === "Text"
          value=`Text`
          onChange=handleInputChange
        />" "
        Text
        <input
          type="radio"
          name="ContactMode"
          checked=formValue.ContactMode  === "Both"
          value=`Both`
          onChange=handleInputChange
        />" "
        Both
        <br />
        <br />
        <button type="button" onClick=submitData> Submit </button>
      </form>
    </div>
  );
;

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.11.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>

【讨论】：

无法取消选中该复选框。如果我取消选中该复选框，则需要将 false 存储在 Relocation 中。

不能在handleInputChange 本身中处理它吗？

【参考方案2】：

复选框的等效value 属性是checked：

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

【参考方案3】：

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

【讨论】：

不能在handleInputChange 本身中处理它吗？