当前位置：首页 > React

react如何更改input选框数据

2026-01-25 14:17:15React

更改 React input 选框数据的方法

在 React 中，input 选框的数据通常通过受控组件或非受控组件的方式管理。以下是具体实现方法：

使用受控组件（推荐）

受控组件将 input 的值与 React 的 state 绑定，通过 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 元素的值：

import React, { useRef } from 'react';

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

  const handleButtonClick = () => {
    console.log(inputRef.current.value);
    // 直接修改值
    inputRef.current.value = 'New Value';
  };

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

处理表单提交

无论是受控还是非受控组件，都可以通过事件处理函数获取最终值：

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

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Submitted value:', value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

动态设置初始值

可以通过 props 或 state 动态设置 input 的初始值：

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

  return (
    <input
      value={value}
      onChange={(e) => setValue(e.target.value)}
    />
  );
}

特殊 input 类型处理

对于 checkbox 或 radio 等特殊 input，处理方式略有不同：

function CheckboxExample() {
  const [checked, setChecked] = useState(false);

  return (
    <input
      type="checkbox"
      checked={checked}
      onChange={(e) => setChecked(e.target.checked)}
    />
  );
}

选择哪种方法取决于具体需求，受控组件提供更精确的状态控制，而非受控组件在某些场景下可能更简单高效。

react如何更改input选框数据