当前位置：首页 > React

react如何实现双向数据绑定

2026-01-25 09:20:37React

实现双向数据绑定的方法

React 本身没有内置双向数据绑定的机制，但可以通过以下几种方式实现类似的功能。

使用受控组件

通过 value 和 onChange 属性将表单元素的状态与 React 组件的状态绑定。

react如何实现双向数据绑定

import React, { useState } from 'react';

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

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

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

结合 `useEffect` 监听状态变化

如果需要双向绑定多个字段或复杂逻辑，可以结合 useEffect 监听状态变化。

react如何实现双向数据绑定

import React, { useState, useEffect } from 'react';

function TwoWayBinding() {
  const [inputValue, setInputValue] = useState('');
  const [outputValue, setOutputValue] = useState('');

  useEffect(() => {
    setOutputValue(inputValue.toUpperCase());
  }, [inputValue]);

  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <p>Output: {outputValue}</p>
    </div>
  );
}

使用自定义 Hook 封装逻辑

将双向绑定的逻辑封装为自定义 Hook，便于复用。

import { useState, useEffect } from 'react';

function useTwoWayBinding(initialValue, transform) {
  const [value, setValue] = useState(initialValue);
  const [transformedValue, setTransformedValue] = useState(initialValue);

  useEffect(() => {
    setTransformedValue(transform(value));
  }, [value, transform]);

  return [value, setValue, transformedValue];
}

function Example() {
  const [input, setInput, output] = useTwoWayBinding('', (val) => val.toUpperCase());

  return (
    <div>
      <input
        type="text"
        value={input}
        onChange={(e) => setInput(e.target.value)}
      />
      <p>Output: {output}</p>
    </div>
  );
}

使用第三方库

如果需要更复杂的双向绑定功能，可以考虑使用第三方库如 mobx 或 formik。

import { observer } from 'mobx-react';
import { observable } from 'mobx';

const store = observable({
  value: '',
  setValue(newValue) {
    this.value = newValue;
  },
});

const MobxExample = observer(() => (
  <input
    type="text"
    value={store.value}
    onChange={(e) => store.setValue(e.target.value)}
  />
));