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

Question

I am making a simple react application where I have some default values to set to the input fields.

Here there are three input fields,

-> Textbox   = UserName

-> Checkbox  = Relocation

-> Radio     = ContactMode

Their respective values are,

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

Working Snippet:

 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>

Problem:

-> In the above eg.., Only the text field value is got set but checkbox and radio button values not got set by default.

Expectaion:

-> All the three input fields needs to get set by its default values.

-> On changing any input field and upon clicking submit button, the latest changes needs to get logged via formValue ..

Answer 1

You need to use 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>

Answer 2

The equivalent value property for a checkbox is 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"));