Почему не работает ref?

Question

[xXRustamXx]

class AddDesk extends React.Component {
  constructor() {
    super();
    this.state = {showForm: false};
    this.input = React.createRef();
  }

  handleShowForm() {
    this.setState({
      showForm: true
    });
    console.log(this.input);
  }

  handleHideForm() {
    this.setState({
      showForm: false
    });
  }

  render() {
    let deskAddRender;
    {
      if ( !this.state.showForm )  {
        deskAddRender = (
          <button onClick={ this.handleShowForm.bind(this) }>Добавить еще одну колонку</button>
        );
      } else {
        deskAddRender = (
          <div className="desk__add_form">
            <input type="text" className="title_active" placeholder="Введите заголовок списка" maxLength="512" ref={ (node) => this.input = node }/>
            <button className="green_btn">Добавить список</button>
            <button className="cancel_btn"  onClick={ this.handleHideForm.bind(this) }><img src="img/icons/close.svg" alt="Отмена" /></button>
          </div>
        );
      }
    }

    return (
      <div className="desk__add">
        { deskAddRender }
      </div>
    );
  }
}

Answer 1

[Владимир Проскурин]

Вы неправильно указываете. Если вы заранее определили ref через createRef, то вам не нужно писать стрелочную функцию в атрибуте ref, достаточно просто указать свойство
ref={ this.input }
UPD: а, у вас не в этом проблема. На момент выполнения console.log в handleShowForm, ref еще не создался, т.к. форма не нарисовалась. this.setState асинхронная функция, она не сразу вызывает render функцию, чтобы показать ваше поле. У setState есть callback, который выполняется после изменения состояния. Напишите так

this.setState({
      showForm: true
    }, () => {
    console.log(this.input);
    });

Comments

[xXRustamXx]

Указал свойство, но ничего не изменилось...

[xXRustamXx]

Парадокс в том что я заучил что setState асинхронная функция т.к это фундамент в освоении React, но что то запутался и вовсе забыл про это, спасибо!