xXRustamXx
@xXRustamXx

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

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>
    );
  }
}
  • Вопрос задан
  • 485 просмотров
Решения вопроса 1
Vlad_IT
@Vlad_IT Куратор тега JavaScript
Front-end разработчик
Вы неправильно указываете. Если вы заранее определили ref через createRef, то вам не нужно писать стрелочную функцию в атрибуте ref, достаточно просто указать свойство
ref={ this.input }
UPD: а, у вас не в этом проблема. На момент выполнения console.log в handleShowForm, ref еще не создался, т.к. форма не нарисовалась. this.setState асинхронная функция, она не сразу вызывает render функцию, чтобы показать ваше поле. У setState есть callback, который выполняется после изменения состояния. Напишите так
this.setState({
      showForm: true
    }, () => {
    console.log(this.input);
    });
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы