当前位置：首页 > React

react如何实现双向

2026-03-31 05:28:34React

React 实现双向绑定的方法

在 React 中实现双向绑定可以通过多种方式完成，以下是几种常见的方法：

使用受控组件（Controlled Components）

受控组件是 React 推荐的方式，通过将表单元素的值绑定到组件的 state，并通过 onChange 事件更新 state 来实现双向绑定。

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}
    />
  );
}

使用非受控组件（Uncontrolled Components）与 ref

非受控组件通过 ref 直接访问 DOM 元素的值，适用于需要手动获取或设置输入框值的场景。

import React, { useRef } from 'react';

function UncontrolledInput() {
  const inputRef = useRef(null);

  const handleClick = () => {
    console.log(inputRef.current.value);
  };

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Get Value</button>
    </div>
  );
}

使用自定义 Hook 简化双向绑定

可以封装一个自定义 Hook 来简化双向绑定的逻辑，例如 useInput。

import { useState } from 'react';

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

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

  return {
    value,
    onChange,
  };
}

function CustomHookExample() {
  const nameInput = useInput('');
  const emailInput = useInput('');

  return (
    <div>
      <input type="text" {...nameInput} />
      <input type="email" {...emailInput} />
    </div>
  );
}

使用第三方库（如 `react-hook-form`）

对于复杂的表单场景，可以使用第三方库如 react-hook-form 来实现高效的双向绑定和表单验证。

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

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

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

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('name')} />
      <input {...register('email')} />
      <button type="submit">Submit</button>
    </form>
  );
}

结合 Context 实现全局状态的双向绑定

如果需要跨组件共享状态，可以使用 Context API 结合双向绑定。

react如何实现双向

import React, { createContext, useContext, useState } from 'react';

const FormContext = createContext();

function FormProvider({ children }) {
  const [formData, setFormData] = useState({});

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

  return (
    <FormContext.Provider value={{ formData, updateFormData }}>
      {children}
    </FormContext.Provider>
  );
}

function FormInput({ name }) {
  const { formData, updateFormData } = useContext(FormContext);

  return (
    <input
      type="text"
      value={formData[name] || ''}
      onChange={(e) => updateFormData(name, e.target.value)}
    />
  );
}

function ContextExample() {
  return (
    <FormProvider>
      <FormInput name="username" />
      <FormInput name="password" />
    </FormProvider>
  );
}