我如何让inputRef返回元素从？尝试了我能想到的一切，但还是无效

Question

我有一个文本字段，我只在单击另一个单选按钮时渲染它。根据React和Material UI文档，我应该能够使用TextField上的inputRef={this.myRef}获得对Mui TextField中输入元素的引用。我可以为另一个未切换的TextField执行此操作，但当我尝试使用刚刚打开的with 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
/>

我希望这样。otherText具有对元素的引用，但这是。其他文本。当前值为空。

Answer 1

我也有同样的问题，做以下工作对我来说：

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

在我的例子中，这里的技巧是if（input！=null）。您还可以在这里查看一个工作示例：CodeSandBox-MaterialUITextFieldFocus

Answer 2

因此，要向任何tipe的输入添加一些内容，包括材料TextField，您需要将其分配为值，例如：

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

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

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

文档链接