React from 表单多元素案例

React from 表单多元素案例

import * as React from "react";
import { useState } from "react";

export default function BasicSelect() {
  const [dstate, setdstate] = useState({
    username: "",
    desc: "",
    city: "2",
    isSingle: true,
  });

  const handleChange = (e) => {
    let { name, type, value, checked } = e.target;
    console.log(name, type, value, checked);
    value = type === "checkbox" ? checked : value;
    console.log(name, value);
    setdstate({
      [name]: value,
    });
  };

  return (
    <div>
      姓名：
      <input
        type="text"
        name="username"
        value={dstate.username}
        onChange={handleChange}
      />
      <br />
      描述：
      <textarea
        name="desc"
        value={dstate.desc}
        onChange={handleChange}
      ></textarea>
      <br />
      城市：
      <select name="city" value={dstate.city} onChange={handleChange}>
        <option value="1">北京</option>
        <option value="2">上海</option>
        <option value="3">广州</option>
        <option value="4">深圳</option>
      </select>
      <br />
      是否单身：
      <input
        type="checkbox"
        name="isSingle"
        checked={dstate.isSingle}
        onChange={handleChange}
      />
    </div>
  );
}