react如何给input赋值

在React中给input赋值的方法

在React中，可以通过受控组件和非受控组件两种方式给input赋值。以下是具体实现方法：

使用受控组件（推荐）

受控组件通过React的state管理input的值，使用onChange事件更新state。

import React, { 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直接访问DOM元素来获取或设置input的值。

import React, { useRef } from 'react';

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

  const handleButtonClick = () => {
    // 给input赋值
    inputRef.current.value = 'New Value';
  };

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

通过props给input赋值

在父组件中控制子组件的input值。

function ParentComponent() {
  const [value, setValue] = useState('Initial Value');

  return <ChildInput value={value} onChange={setValue} />;
}

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

动态设置默认值

使用defaultValue属性设置非受控input的初始值。

function DefaultValueInput() {
  return <input type="text" defaultValue="Initial Value" />;
}

使用表单库

对于复杂表单，可以使用Formik等库来管理input值。

import { Formik, Field, Form } from 'formik';

function FormikExample() {
  return (
    <Formik
      initialValues={{ name: '' }}
      onSubmit={(values) => console.log(values)}
    >
      <Form>
        <Field name="name" type="text" />
      </Form>
    </Formik>
  );
}

选择方法时应考虑组件的复杂度和需求，简单表单推荐使用受控组件，复杂表单可考虑使用表单库。