高端手机格局再生变数，华为赋魅、苹果祛魅

类似 vue 中的 v-model

<input value={msg} onChange={changeHandler} />

import { useState } from "react";

const [msg, setMsg] = useState("你好");

function changeHandler(e) {
	setMsg(() => e.target.value);
}

<textarea value={msg} onChange={changeHandler} />

import { useState } from "react";

const [msg, setMsg] = useState("你好");

function changeHandler(e) {
	setMsg(() => e.target.value);
}

<select value={city} onChange={changeHandler} >
  <option value="beijing">北京</option>
  <option value="shanghai">上海</option>
  <option value="wuhan">武汉</option>
</select>

import { useState } from "react";

const [city, setCity] = useState("beijing");

function changeHandler(e) {
    setCity(() => e.target.value);
}

<label htmlFor="radio_male">男</label>
<input id="radio_male" type="radio" name="gender" value='male' checked={gender === 'male'} onChange={changeHandler} />

<label htmlFor="radio_female">女</label>
<input id="radio_female" type="radio" name="gender" value='female' checked={gender === 'female'} onChange={changeHandler} />

import { useState } from "react";

const [gender, setGender] = useState('');

function changeHandler(e) {
    setGender(() => e.target.value);
}

<input id="checkbox_apple" type="checkbox" name="fruit" value='apple' checked={fruitList.includes('apple')} onChange={changeHandler} />
<label htmlFor="checkbox_apple">苹果</label>

<input id="checkbox_orange" type="checkbox" name="fruit" value='orange' checked={fruitList.includes('orange')} onChange={changeHandler} />
<label htmlFor="checkbox_orange">橘子</label>

import { useState } from "react";

  const [fruitList, setFruitList] = useState([]);

  function changeHandler(e) {
    let newValue = e.target.value;

    if (fruitList.includes(newValue)) {
      // 数组删除元素
      setFruitList(fruitList.filter((item) => item !== newValue));
    } else {
      // 数组新增元素
      setFruitList([...fruitList, newValue]);
    }
  }

用 htmlFor 代替 for 来绑定其他表单元素

<label htmlFor="msgInput">消息:</label>
<input id="msgInput" value={msg} onChange={changeHandler} />