React Как повесить focus на input ПОСЛЕ того как элемент отрендерился на странице?

Question

Подскажите, как сделать поле в фокусе, но после того как элемент уже отрендерился ? Пробовал через атрибут autoFocus но почему-то не отрабатывает. Приведу простой пример из песочницы

Как сделать, что бы после нажатия кнопки Редактировать, и прошла смена состояние триггера isInputCorrecting добиться что бы конец слова которое сейчас передано в value input было в фокусе и его можно было править ?

Answer 1

Добрые люди подсказали решение, через добавление ref-ов Только для классового компонента Решение тут

import React from "react";

class ProfileForm extends React.Component {
  constructor(props) {
    super(props);

    this.inputRef = React.createRef();

    this.state = {
      name: this.props.userName,
      error_name: "",
      isInputCorrecting: false
    };

    const startName = props.userName;
    console.log("startName =", startName);

    this.handleNickChange = this.handleNickChange.bind(this);
    this.handleSubmitNick = this.handleSubmitNick.bind(this);
  }
  inputCorrecting(event) {
    event.preventDefault();
    this.setState({ isInputCorrecting: true });

    this.inputRef.current.focus();
    console.log("this.inputRef.current", document.activeElement);
  }

  inputFinishCorrecting(event) {
    event.preventDefault();
    this.setState({ isInputCorrecting: false });
  }

  handleNickChange(event) {
    this.setState({ name: event.target.value });
  }
  handleSubmitNick(event) {
    event.preventDefault();
    // console.log("this.state.name =", this.state.name);

    if (this.state.name === "" || this.state.name === undefined) {
      this.setState({ error_name: "Ваш nickname не может быть пустым" });
      this.setState({ name: this.props.userName });
      return;
    }
    if (this.state.name.length <= 3) {
      this.setState({ error_name: "Nickname не может быть > 4 символов" });
      return;
    }

    if (this.state.name.length > 20) {
      this.setState({ error_name: "Nickname не может быть < 20 символов" });
      return;
    }

    this.setState({ error_name: "" });
    alert("Отправленное имя: " + this.state.name);
  }

  render() {
    return (
      <div className="profile_form__full">
        <form
          className="profile_form"
          onSubmit={(event) => this.handleSubmitNick(event)}
        >
          <label htmlFor="userName" className="label_element">
            <input
              ref={this.inputRef}
              id="userName"
              className="profile_form__input"
              type="text"
              name="name"
              value={this.state.name}
              onChange={(e) => this.handleNickChange(e)}
              //disabled={!this.state.isInputCorrecting}
            />
            <span className="text_error">{this.state.error_name}</span>
          </label>
          {this.state.isInputCorrecting ? (
            <button
              className="profile_form__change"
              type="submit"
              onClick={(e) => this.handleSubmitNick(e)}
            >
              Отправить изменения
            </button>
          ) : (
            <button
              className="profile_form__change"
              type="button"
              onClick={(e) => this.inputCorrecting(e)}
            >
              Редактировать
            </button>
          )}
        </form>
      </div>
    );
  }
}

export default ProfileForm;

Проблема данного способа решения что пришлось отказаться от disabled до момента нажатия на кнопку, поскольку ref не цеплялся. Если кто-то может подсказать как это ещё можно улучшить, буду признателен

БЛОГ НА HUSL

React Как повесить focus на input ПОСЛЕ того как элемент отрендерился на странице?

Ответы (1 шт):