如何在reactjs中设置表单内复选框的值

Question

我有一个表格可以用来过滤搜索。除了其他字段，我还有一个复选框。这就是我处理提交的方式

const [formData, setFormData] = useState({
    name: "",
    location: "",
    schoolName: "",
    class: 0,
    board: 0,
    homeTuition: false,
  });

  const changeFormData = (e) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value,
    });
  };

  const formDataSubmit = (e) => {
    e.preventDefault();
    console.log(formData);
    setFormData({
      name: "",
      location: "",
      schoolName: "",
      class: 0,
      board: 0,
      homeTuition: false,
    });
  };

<form onSubmit={(e) => formDataSubmit(e)}>
            <div className="word">
              <input
                type="text"
                name="name"
                id="name"
                placeholder="teacher name"
                value={formData.name}
                onChange={(e) => changeFormData(e)}
              />
            </div>
            <div className="word">
              <input
                type="text"
                name="location"
                id="location"
                placeholder="location / area name"
                value={formData.location}
                onChange={(e) => changeFormData(e)}
              />
            </div>
            <div className="word">
              <input
                type="text"
                name="schoolName"
                id="schoolName"
                placeholder="Name of School"
                value={formData.schoolName}
                onChange={(e) => changeFormData(e)}
              />
            </div>

            <div className="select-menu">
              <select
                value={formData.class}
                name="class"
                id="class"
                onChange={(e) => changeFormData(e)}
              >
                <option value="0" disabled hidden>
                  Select Class
                </option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
              </select>
            </div>

            <div className="select-menu">
              <select
                value={formData.board}
                name="board"
                id="board"
                onChange={(e) => changeFormData(e)}
              >
                <option value="0" disabled hidden>
                  Select Board
                </option>
                <option value="mbose">MBOSE</option>
                <option value="cbse">CBSE</option>
                <option value="icse">ICSE</option>
              </select>
            </div>

            <div className="home-tutor">
              <label htmlFor="homeTuition">
                Home Tutor
                <input
                  type="checkbox"
                  name="homeTuition"
                  id="homeTuition"
                  value={formData.homeTuition}
                  onChange={(e) => changeFormData(e)}
                />
                <span></span>
              </label>
            </div>

            <div className="submit-button">
              <button type="submit">Apply Filter</button>
            </div>
          </form>

如果选中，我想将 homeTuition 设置为 true，否则为 false。但是由于我是新手，所以我不明白在哪里写这个逻辑。

我尝试为此使用单独的 useState 来更改 bool 值 onClick，但我知道它不会立即影响 target.value。所以请帮我看看我应该怎么做？

Answer 1

添加加法函数：

  const changeCheckbox = (e) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.checked,
    });
  };

更改复选框的输入标签（使用 'checked' 代替 'value' 和新函数）：

        <input
          type="checkbox"
          name="homeTuition"
          id="homeTuition"
          checked={formData.homeTuition}
          onChange={(e) => changeCheckbox(e)}
        />

Answer 2

如果您想使用单个处理程序：

const changeFormData = (e) => {
    const { name, type } = e.target;
    setFormData({
        ...formData,
        [name]: e.target[type === "checkbox" ? "checked" : "value"]
    });
};

return (
    <input
        type="text"
        name="schoolName"
        id="schoolName"
        placeholder="Name of School"
        value={formData.schoolName}
        onChange={(e) => changeFormData(e)}
    />
    <input
        type="checkbox"
        name="homeTuition"
        id="homeTuition"
        checked={formData.homeTuition}
        onChange={(e) => changeFormData(e)}
    />
);

如何在reactjs中设置表单内复选框的值

How to set the value of a checkbox inside a form in reactjs

forms

reactjs