react 组件双向绑定

1. 使用 state 实现双向绑定

对于双向绑定,需要同时处理表单元素的`value`属性(通过`state`来设置)和`onChange`事件(用于更新`state`)。

javascript 复制代码
import { useState } from "react";

const MyComponent = () => {

  const [inputValue, setInputValue] = useState("");

  const handleChange = (e) => {

    setInputValue(e.target.value);

  };

  return (

    <div>

      <input type="text" value={inputValue} onChange={handleChange} />

      <p>You entered: {inputValue}</p>

    </div>

  );

};

2. 多个表单元素的双向绑定

例如表单中有多个输入框,可以为每个表单元素创建一个独立的状态变量,或者使用一个对象来存储所有表单元素的值。

javascript 复制代码
import { useState } from "react";

const MyFormComponent = () => {

  const [formData, setFormData] = useState({

    name: "",

    email: "",

  });

  const handleChange = (e) => {

    const { name, value } = e.target;

    setFormData({

      ...formData,

      [name]: value,

    });

  };

  const handleSubmit = (e) => {

    e.preventDefault();

    console.log("Form submitted:", formData);

  };

  return (

    <form onSubmit={handleSubmit}>

      <input

        type="text"

        name="name"

        value={formData.name}

        onChange={handleChange}

      />

      <input

        type="email"

        name="email"

        value={formData.email}

        onChange={handleChange}

      />

      <button type="submit">Submit</button>

    </form>

  );

};
相关推荐
一斤代码2 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子2 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年2 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子3 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina3 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路4 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_4 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
甜瓜看代码4 小时前
1.
react.js·node.js·angular.js
伍哥的传说4 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409194 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app