如何让 inputRef 从 <Textfield> 返回 <input> 元素？尝试了我能想到的一切，它仍然是空的

Posted 2023-02-22

【中文标题】如何让 inputRef 从 <Textfield> 返回 <input> 元素？尝试了我能想到的一切，它仍然是空的

【英文标题】：How do I get inputRef to return <input> element from <Textfield>? Tried everything I can think of and it's still null

【发布时间】：2019-06-19 17:09:54

【问题描述】：

我有一个仅在单击另一个单选按钮时才呈现的 TextField。根据 React 和 Material-UI 文档，我应该能够使用 TextField 上的 inputRef=this.myRef 获取 Mui TextField 内的输入元素的引用。我可以为另一个未切换的 TextField 执行此操作，但是当我尝试使用刚刚打开的 TextField 时，它显示为 null。

我尝试过使用 inputRef=this.otherText 和 inputProps=ref: this.otherText 并且结果相同。

// Start of my class where I do the createRef()
class Form extends Component 
  constructor(props) 
    super(props);
    this.otherText = React.createRef();
  

// Start of function where I try to reference the ref:
processApplication = e => 
    if (e.target.value.toLowerCase() === 'other')  // this triggers the         TextField to be rendered
        console.log(this.otherText); // Returns null, kinda - see screenshot
    

// The TextField I'm trying to reference:
<TextField
    id='applicationOther'
    name='applicationOther'
    label='Describe application:'
    margin='normal'
    multiline=true
    fullWidth=true
    onChange=this.anyChange
    autoFocus=true
    inputRef=this.otherText  // Here's where the reference is made
/>

我希望 this.otherText 有对元素的引用，但是 this.otherText.current 为空。

【问题讨论】：

您说 TextField 仅在某些情况下呈现。这很可能是您得到 null 的原因：它还没有渲染。但为了向您提供有关计时不工作的原因的更多详细信息，我们需要查看您的渲染方法及其条件渲染、将状态设置为隐藏/显示的代码以及调用 processApplication 的代码。跨度>

您能解释一下您想要ref 做什么吗？ 99% 的时间你不需要它们。当您需要进行宽度/高度计算时，它们很好

@NicholasTower 是的，这就是我的想法，我已经继续前进，因为这并不重要，而且我花了太多钱。时间。谢谢你的洞察力。我正在使用它来设置元素出现后的文本。

【参考方案1】：

因此，要将一些内容添加到任何提示的输入，包括 Material TextField，您可以将其分配为 value，例如：

this.state =  input: 'Some string' 
<TextField value=this.state.input />

请记住非受控组件和受控组件之间的细微差别，因此根据您的用例，您可能希望传递 defaultValue 而不是 value。来自文档：

在 React 渲染生命周期中，表单元素的 value 属性将覆盖 DOM 中的 value。对于不受控制的组件，您通常希望 React 指定初始值，但不控制后续更新。要处理这种情况，您可以指定 defaultValue 属性而不是 value。

Docs link

【讨论】：

我没有使用 ref 来隐藏/显示，我根据你所描述的状态变量来工作。我试图用 ref 做的是，一旦对象可见，就给它正确的内容。

所以基本上你试图渲染一个TextInput 的内容取决于单选按钮？例如，用户单击按钮，一些字符串被存储在状态中，该字符串被馈送到输入？

是的，几乎：1. 用户单击特定单选按钮，2. 文本输入显示在单选按钮下方 3. 文本输入预填充了取决于其他状态变量的默认文本。我的问题似乎是当我尝试访问 ref 以设置文本时未呈现文本输入。

你不会用<TextField value=this.state.someKey /> 之类的东西将值设置为TextField 吗？

我之前尝试过类似的事情，但无法让它工作，但现在我对 React 更熟悉了，我认为这就是解决方案。 @predrag-beocanin 如果您想更新对此的答案，我会接受。谢谢！

【参考方案2】：

我遇到了同样的问题，以下对我有用：

<TextField
    variant="filled"
    inputRef=(input) => 
      if(input != null) 
         input.focus();
      
    
/>

就我而言，这里的诀窍是if(input != null)。您还可以在这里查看工作示例：CodeSandBox- Material-ui-TextFieldFocus