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

Question

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

这里有三个输入框，

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

记录最新更改

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

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

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

How to set default value in checkbox and radio button?

javascript

checkbox

input

radio

reactjs