如何获取Material UI中TextField组件的输入值

一、修复onInput事件不触发的问题 #

你当前的onInput写法有误：直接执行console.log('Input FIRE')会在组件渲染时就打印内容，而非输入触发事件时执行。必须传递一个函数：

<TextField
  id="outlined-search"
  label="Поиск по названию"
  variant="outlined"
  // 传递函数，输入时触发
  onInput={(e) => {
    console.log('Input FIRE');
    // 同时可直接获取当前输入值
    console.log('当前输入值:', e.target.value);
  }}
/>

二、获取TextField输入值的两种常用方式 #

1. 受控组件（推荐） #

通过useState管理输入状态，结合onChange事件实时同步值：

import { useState } from 'react';
import TextField from '@mui/material/TextField';

function SearchComponent() {
  // 初始化输入状态
  const [searchText, setSearchText] = useState('');

  const handleInputChange = (e) => {
    const inputValue = e.target.value;
    // 更新状态
    setSearchText(inputValue);
    // 这里可处理实时逻辑，比如搜索过滤
    console.log('实时输入值:', inputValue);
  };

  return (
    <TextField
      id="outlined-search"
      label="Поиск по названию"
      variant="outlined"
      // 绑定状态到value，实现受控
      value={searchText}
      onChange={handleInputChange}
    />
  );
}

2. 非受控组件 #

通过useRef直接获取DOM元素的值，适合不需要实时同步状态的场景：

import { useRef } from 'react';
import TextField from '@mui/material/TextField';

function SearchComponent() {
  // 创建ref关联输入框
  const inputRef = useRef(null);

  // 比如点击按钮时获取值
  const getInputValue = () => {
    if (inputRef.current) {
      const value = inputRef.current.value;
      console.log('输入框值:', value);
      // 后续处理逻辑
    }
  };

  return (
    <div>
      <TextField
        id="outlined-search"
        label="Поиск по названию"
        variant="outlined"
        // 绑定ref
        inputRef={inputRef}
      />
      <button onClick={getInputValue}>获取输入值</button>
    </div>
  );
}

内容的提问来源于stack exchange，提问作者iAndyPC