当前位置：首页 > React

react如何给input赋值

2026-01-24 11:07:34React

在React中给input赋值的方法

使用受控组件（推荐方式）

通过React的state与input的value属性绑定，实现双向数据流控制。每当输入内容变化时，更新state；state的变化又会反映到input的显示值上。

import { useState } from 'react';

function ControlledInput() {
  const [inputValue, setInputValue] = useState('');

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

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

使用非受控组件（通过ref）

通过useRef直接操作DOM元素，适合需要手动触发赋值的场景，但不推荐作为主要数据流方式。

import { useRef } from 'react';

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

  const handleButtonClick = () => {
    inputRef.current.value = 'Programmatic value';
  };

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

通过props动态赋值

当input作为子组件时，可以通过父组件传递的props进行赋值控制。

function ParentComponent() {
  const [externalValue, setExternalValue] = useState('');

  return (
    <ChildInput 
      value={externalValue} 
      onChange={(val) => setExternalValue(val)}
    />
  );
}

function ChildInput({ value, onChange }) {
  return (
    <input
      type="text"
      value={value}
      onChange={(e) => onChange(e.target.value)}
    />
  );
}

表单库集成

使用如Formik等表单库时，可通过其提供的Field组件或useField hook自动处理赋值逻辑。

react如何给input赋值

import { Formik, Field } from 'formik';

function FormikExample() {
  return (
    <Formik initialValues={{ email: '' }}>
      <form>
        <Field 
          type="email" 
          name="email" 
          // 自动绑定值与变更处理
        />
      </form>
    </Formik>
  );
}