当前位置：首页 > React

react如何实现双向

2026-02-26 12:12:06React

双向绑定实现方法

React 本身没有内置类似 Vue 的双向绑定机制，但可以通过以下方式模拟实现双向数据绑定效果。

受控组件方式

通过 value 和 onChange 实现表单元素的双向绑定：

react如何实现双向

function ControlledComponent() {
  const [value, setValue] = useState('');

  const handleChange = (e) => {
    setValue(e.target.value);
  };

  return <input value={value} onChange={handleChange} />;
}

自定义 Hook 封装

创建可复用的双向绑定 Hook：

function useBind(initialValue) {
  const [value, setValue] = useState(initialValue);

  const onChange = (e) => {
    setValue(e.target.value);
  };

  return {
    value,
    onChange
  };
}

function MyComponent() {
  const inputProps = useBind('');
  return <input {...inputProps} />;
}

非受控组件 + ref

使用 ref 获取 DOM 值并手动同步：

react如何实现双向

function UncontrolledComponent() {
  const inputRef = useRef();
  const [value, setValue] = useState('');

  const syncValue = () => {
    setValue(inputRef.current.value);
  };

  return (
    <input 
      ref={inputRef} 
      defaultValue={value} 
      onBlur={syncValue}
    />
  );
}

对象属性绑定

处理复杂对象的多字段绑定：

function ObjectBinding() {
  const [form, setForm] = useState({ name: '', age: '' });

  const handleChange = (e) => {
    setForm({
      ...form,
      [e.target.name]: e.target.value
    });
  };

  return (
    <>
      <input 
        name="name" 
        value={form.name} 
        onChange={handleChange} 
      />
      <input 
        name="age" 
        value={form.age} 
        onChange={handleChange}
      />
    </>
  );
}

第三方库方案

使用专门的双向绑定库简化操作：

npm install react-bindings

import { useBinding } from 'react-bindings';

function LibraryComponent() {
  const { value, onChange } = useBinding('');
  return <input value={value} onChange={onChange} />;
}

每种方法各有优缺点，受控组件是 React 推荐的标准做法，适合大多数场景。复杂表单建议使用 Formik 或 React Hook Form 等专业表单库。