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

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 = () => {

  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>

Answer 2

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

<input

          type="checkbox"

          name="Relocation"

          checked={formValue.Relocation}

          onChange={handleInputChange}

        />

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