如何在Material-UI的TextField中使用React的ref属性获取输入数据？

嘿，我明白你在Material-UI TextField上用ref获取输入值时遇到的麻烦了——这玩意儿确实因为是封装组件，不能直接像原生input那样用ref，我来给你捋清楚正确的做法！

首先得搞清楚：直接给TextField组件加ref属性，拿到的是TextField组件的实例，不是底层的原生input元素，所以你没法直接通过它获取输入值。Material-UI专门提供了inputRef属性来帮我们直接拿到原生input，这才是官方推荐的正确姿势。

方法1：用useRef + inputRef（函数组件推荐） #

这是最简洁可靠的方式，用React的useRef创建一个ref对象，直接绑定到TextField的inputRef上：

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

function InputComponent() {
  // 创建ref对象
  const inputRef = useRef(null);

  // 点击按钮获取输入值
  const getInputValue = () => {
    if (inputRef.current) {
      console.log('当前输入值：', inputRef.current.value);
    }
  };

  return (
    <div>
      <TextField
        label="请输入内容"
        variant="outlined"
        inputRef={inputRef} // 绑定到原生input的ref
      />
      <button onClick={getInputValue} style={{ marginLeft: '10px' }}>
        获取值
      </button>
    </div>
  );
}

组件挂载后，inputRef.current就会指向底层的原生input元素，直接访问value就能拿到输入内容。

方法2：函数式inputRef（适合需要即时操作input的场景） #

如果你需要在ref绑定的时候做一些额外操作（比如自动聚焦），可以给inputRef传一个函数：

<TextField
  label="自动聚焦输入框"
  variant="filled"
  inputRef={(element) => {
    if (element) {
      // 组件挂载后自动聚焦
      element.focus();
      // 也可以把element存到组件状态里后续使用
      // setInputElement(element);
    }
  }}
/>

关于inputProps的用法 #

你之前尝试用inputProps传递ref其实也可行，但写法要注意：把ref放到inputProps的ref字段里，不过官方更推荐用inputRef（因为inputRef是专门为获取input元素设计的，优先级也比inputProps.ref高）。示例如下：

<TextField
  label="通过inputProps传ref"
  variant="standard"
  inputProps={{ ref: inputRef }}
/>

为什么你之前的尝试没生效？ #

• 直接给TextField加ref：拿到的是组件实例，不是原生input，没法直接取value；
• 用inputRef时没正确绑定：如果传的不是函数或ref对象，或者没在current上访问元素，就会失效；

按照上面的方法来，就能轻松获取TextField的输入值啦！

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