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>

  );

};
相关推荐
Struggler2817 分钟前
Chrome插件开发
前端
前端 贾公子19 分钟前
Monorepo + vite 怎么热更新
前端
coding随想28 分钟前
掌控网页的魔法之书:JavaScript DOM的奇幻之旅
开发语言·javascript·ecmascript
然我1 小时前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子1 小时前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹1 小时前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器1 小时前
指定阿里镜像原理
前端
枷锁—sha1 小时前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha1 小时前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜2 小时前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip