react18【系列实用教程】双向绑定表单 (2024最新版)含受控组件、非受控组件、单行多行输入框 input,下拉选择 select,单选 radio,多选 checkbox,标签 label

类似 vue 中的 v-model

受控组件

有value属性,将表单值的获取和更新都交由react中的state来管理的组件

import { useState } from "react";

export default function Father() {
  const [msg, setmsg] = useState("");
  const handleChange = (e) => {
    setmsg(e.target.value);
  };

  return (
    <div>
      <p> {msg}</p>
      <input type="text" value={msg} onChange={handleChange} />
    </div>
  );
}

非受控组件

没有value属性,通过操作DOM来获取表单数据的组件

import { useRef } from "react";

export default function Father() {
  const Ref_input = useRef(null);

  function getFileInfo() {
    console.log(Ref_input.current && Ref_input.current.files);
  }

  return (
    <div>
      <input type="file" ref={Ref_input} />
      <button onClick={getFileInfo}>获取文件信息</button>
    </div>
  );
}

单行输入框 input

<input value={msg} onChange={changeHandler} />
import { useState } from "react";
const [msg, setMsg] = useState("你好");

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

多行输入框 textarea

<textarea value={msg} onChange={changeHandler} />
import { useState } from "react";
const [msg, setMsg] = useState("你好");

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

下拉选择 select

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

单选 radio

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

多选 checkbox

<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]);
    }
  }

标签 label

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

<label htmlFor="msgInput">消息:</label>
<input id="msgInput" value={msg} onChange={changeHandler} />
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

朝阳39

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值