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

Question

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

这里有三个输入字段，

-> 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>

  );

};

问题：

-> 在上面的示例中，仅设置了文本字段值，但默认情况下未设置复选框和单选按钮值。

期望：

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

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

Answer 1

您需要使用已检查const { useState } = React;const App = () => {&nbsp; const [formValue, setFormValue] = useState({&nbsp; &nbsp; UserName: "Test User",&nbsp; &nbsp; Relocation: true,&nbsp; &nbsp; ContactMode: "Email",&nbsp; });&nbsp; const handleInputChange = (e) => {&nbsp; &nbsp; const { name, value } = event.target;&nbsp; &nbsp; setFormValue({&nbsp; &nbsp; &nbsp; ...formValue,&nbsp; &nbsp; &nbsp; [name]: value,&nbsp; &nbsp; });&nbsp; };&nbsp;&nbsp;&nbsp; const handleCheckedChange = (e) => {&nbsp; &nbsp; const { name, checked } = event.target;&nbsp; &nbsp; setFormValue({&nbsp; &nbsp; &nbsp; ...formValue,&nbsp; &nbsp; &nbsp; [name]: checked,&nbsp; &nbsp; });&nbsp; }&nbsp;&nbsp;&nbsp; const submitData = () => {&nbsp; &nbsp; console.log(formValue)&nbsp; }&nbsp; return (&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <form>&nbsp; &nbsp; &nbsp; &nbsp; <label> User Name </label>&nbsp; &nbsp; &nbsp; &nbsp; <input&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="text"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="UserName"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value={formValue.UserName}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onChange={handleInputChange}&nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; <br />&nbsp; &nbsp; &nbsp; &nbsp; <br />&nbsp; &nbsp; &nbsp; &nbsp; <label> Willing to relocate? </label>&nbsp; &nbsp; &nbsp; &nbsp; <input&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="checkbox"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="Relocation"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; checked={formValue.Relocation}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onChange={handleCheckedChange}&nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; <br />&nbsp; &nbsp; &nbsp; &nbsp; <br />&nbsp; &nbsp; &nbsp; &nbsp; <label> Contact Mode </label>&nbsp; &nbsp; &nbsp; &nbsp; <input&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="radio"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="ContactMode"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; checked={formValue.ContactMode === "Email"}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value={`Email`}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onChange={handleInputChange}&nbsp; &nbsp; &nbsp; &nbsp; />{" "}&nbsp; &nbsp; &nbsp; &nbsp; Email&nbsp; &nbsp; &nbsp; &nbsp; <input&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="radio"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="ContactMode"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; checked={formValue.ContactMode&nbsp; === "Text"}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value={`Text`}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onChange={handleInputChange}&nbsp; &nbsp; &nbsp; &nbsp; />{" "}&nbsp; &nbsp; &nbsp; &nbsp; Text&nbsp; &nbsp; &nbsp; &nbsp; <input&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="radio"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="ContactMode"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; checked={formValue.ContactMode&nbsp; === "Both"}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value={`Both`}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onChange={handleInputChange}&nbsp; &nbsp; &nbsp; &nbsp; />{" "}&nbsp; &nbsp; &nbsp; &nbsp; Both&nbsp; &nbsp; &nbsp; &nbsp; <br />&nbsp; &nbsp; &nbsp; &nbsp; <br />&nbsp; &nbsp; &nbsp; &nbsp; <button type="button" onClick={submitData}> Submit </button>&nbsp; &nbsp; &nbsp; </form>&nbsp; &nbsp; </div>&nbsp; );};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>

Answer 2

value复选框的等效属性是checked：<input&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="checkbox"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="Relocation"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; checked={formValue.Relocation}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onChange={handleInputChange}&nbsp; &nbsp; &nbsp; &nbsp; />

Answer 3

&nbsp; &nbsp;const { useState } = React;const App = () => {&nbsp; const [formValue, setFormValue] = useState({&nbsp; &nbsp; UserName: "Test User",&nbsp; &nbsp; Relocation: true,&nbsp; &nbsp; ContactMode: "Email",&nbsp; });&nbsp; const handleInputChange = (e) => {&nbsp; &nbsp; const { name, value } = event.target;&nbsp; &nbsp; setFormValue({&nbsp; &nbsp; &nbsp; ...formValue,&nbsp; &nbsp; &nbsp; [name]: value,&nbsp; &nbsp; });&nbsp; };&nbsp;&nbsp;&nbsp; const submitData = () => {&nbsp; &nbsp; console.log(formValue)&nbsp; }&nbsp; return (&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <form>&nbsp; &nbsp; &nbsp; &nbsp; <label> User Name </label>&nbsp; &nbsp; &nbsp; &nbsp; <input&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="text"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="UserName"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value={formValue.UserName}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onChange={handleInputChange}&nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; <br />&nbsp; &nbsp; &nbsp; &nbsp; <br />&nbsp; &nbsp; &nbsp; &nbsp; <label> Willing to relocate? </label>&nbsp; &nbsp; &nbsp; &nbsp; <input&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="checkbox"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="Relocation"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value={formValue.Relocation}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onChange={handleInputChange}&nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; <br />&nbsp; &nbsp; &nbsp; &nbsp; <br />&nbsp; &nbsp; &nbsp; &nbsp; <label> Contact Mode </label>&nbsp; &nbsp; &nbsp; &nbsp; <input&nbsp; &nbsp; &nbsp; type="radio"&nbsp; &nbsp; &nbsp; name="ContactMode"&nbsp; &nbsp; &nbsp; value={`Email`}&nbsp; &nbsp; &nbsp; onChange={handleInputChange}&nbsp; &nbsp; &nbsp; checked={formValue.ContactMode==="Email"}&nbsp; &nbsp; />{" "}&nbsp; &nbsp; Email&nbsp; &nbsp; <input&nbsp; &nbsp; &nbsp; type="radio"&nbsp; &nbsp; &nbsp; name="ContactMode"&nbsp; &nbsp; &nbsp; value={`Text`}&nbsp; &nbsp; &nbsp; onChange={handleInputChange}&nbsp; &nbsp; &nbsp; checked={formValue.ContactMode==="Text"}&nbsp; &nbsp; />{" "}&nbsp; &nbsp; Text&nbsp; &nbsp; <input&nbsp; &nbsp; &nbsp; type="radio"&nbsp; &nbsp; &nbsp; name="ContactMode"&nbsp; &nbsp; &nbsp; value={`Both`}&nbsp; &nbsp; &nbsp; onChange={handleInputChange}&nbsp; &nbsp; &nbsp; checked={formValue.ContactMode==="Both"}&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; />{" "}&nbsp; &nbsp; Both&nbsp; &nbsp; <br />&nbsp; &nbsp; <br />&nbsp; &nbsp; &nbsp; &nbsp; <button type="button" onClick={submitData}> Submit </button>&nbsp; &nbsp; &nbsp; </form>&nbsp; &nbsp; </div>&nbsp; );};ReactDOM.render(<App />, document.getElementById("root"));