Как получить inputRef для возврата элемента <input>из <Textfield>?Перепробовал все, что мог придумать, и все равно ноль

Question

У меня есть TextField, которое отображается только при нажатии другой кнопки. Согласно документации React и Material-UI, я должен иметь возможность получить ссылку на элемент input внутри Mui TextField, используя inputRef = {this.myRef} в TextField. Я могу сделать это для другого TextField, который не переключается, но когда я пытаюсь сделать это с TextField, который я только что включил, он показывает ноль.

Я пытался использовать 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 имеет значение null.

Answer 1

Таким образом, чтобы добавить некоторый контент ко входу любой подсказки, включая Материал TextField, вы должны назначить его как value, например:

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

Имейте в виду небольшую разницу между неконтролируемыми и контролируемыми компонентами, поэтому в зависимости от вашего варианта использования вы можете передать defaultValue вместо value. Из документов:

В жизненном цикле рендеринга React атрибут value в элементах формы переопределяет значение в DOM. В случае неконтролируемого компонента вы часто хотите, чтобы React указывал начальное значение, но оставлял последующие обновления неуправляемыми. Для обработки этого случая вы можете указать атрибут defaultValue вместо value.

Ссылка на документацию