当前位置：首页 > React

react如何绑定数据

2026-01-24 22:40:50React

React 数据绑定的方法

React 中的数据绑定通常通过状态（state）和属性（props）来实现，以下是几种常见的绑定方式：

单向数据绑定（State to UI）

React 默认采用单向数据流，通过 useState 或类组件的 this.state 管理状态，状态变化会自动触发 UI 更新。

import { useState } from 'react';

function Example() {
  const [text, setText] = useState('初始值');

  return (
    <div>
      <input 
        value={text} 
        onChange={(e) => setText(e.target.value)} 
      />
      <p>当前内容: {text}</p>
    </div>
  );
}

双向数据绑定

通过 value 和 onChange 组合实现类似双向绑定的效果：

function TwoWayBinding() {
  const [formData, setFormData] = useState({
    username: '',
    password: ''
  });

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

  return (
    <form>
      <input
        name="username"
        value={formData.username}
        onChange={handleChange}
      />
      <input
        name="password"
        type="password"
        value={formData.password}
        onChange={handleChange}
      />
    </form>
  );
}

类组件中的绑定

类组件中使用 this.setState 管理状态：

class ClassComponent extends React.Component {
  state = { count: 0 };

  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <button onClick={this.handleClick}>
        点击次数: {this.state.count}
      </button>
    );
  }
}

使用 Context 跨组件绑定

通过 Context API 实现跨层级数据传递：

const MyContext = React.createContext();

function Parent() {
  const [sharedData, setSharedData] = useState('全局数据');

  return (
    <MyContext.Provider value={{ sharedData, setSharedData }}>
      <Child />
    </MyContext.Provider>
  );
}

function Child() {
  const { sharedData, setSharedData } = useContext(MyContext);

  return <p>{sharedData}</p>;
}

表单库辅助绑定

使用如 react-hook-form 等库简化表单绑定：

import { useForm } from 'react-hook-form';

function Form() {
  const { register, handleSubmit } = useForm();

  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('firstName')} />
      <input {...register('lastName')} />
      <button type="submit">提交</button>
    </form>
  );
}