Компонент функции реакции использует переменную (не состояние)

#javascript #reactjs

#javascript #reactjs

Вопрос:

С компонентом класса React я использую некоторую переменную (не this.state ), помогающую моей логике управления. Пример: this.isPressBackspace = false и когда я устанавливаю переменную, не делайте повторный рендеринг компонента (например: this.isPressBackspace = true ).

Это работает идеально в компоненте класса, но когда я переключаюсь на функциональный компонент, я не знаю, где разместить this.isPressBackspace .

Вот мой пример в codesandbox. https://codesandbox.io/s/function-component-example-3h98d

Комментарии:

1. Вы пытались вместо этого использовать хуки ?

2. Вы должны использовать useState и изменить состояние Здесь я преобразовал ваш код, взгляните. codesandbox.io/s/function-component-example-forked-0fkl3

3. @DipankarMaikap спасибо, но я не хочу использовать useState. Знаете ли вы другое решение?

Ответ №1:

useRef возвращает изменяемый объект ref, свойство .current которого инициализируется переданным аргументом (initialValue). Возвращаемый объект будет сохраняться в течение всего срока службы компонента.

 const isPressBackspaceRef = React.useRef(false);
const keyDownPositionRef = React.useRef({});
const onKeyDown = (e) => {
    // this is wrong syntax
    // this.keyDownPosition OR let keyDownPosition
    keyDownPositionRef.current = {
      start: e.target.selectionStart,
      end: e.target.selectionEnd
    };
    switch (e.key) {
      case "Backspace":
        isPressBackspaceRef.current = true; // this is wrong syntax ????
        break;
      default:
        break;
    }
  };
const onChange = (e) => {
    const { end } = keyDownPositionRef;
    if (isPressBackspaceRef.current) {
      const length = end - e.target.selectionEnd;
      alert(`You delete ${length} character`);
    }
    isPressBackspaceRef.current = false;
};
  

Ответ №2:

По моему опыту, вы не используете ключевое слово this при работе с функциональными компонентами. Вместо этого вы используете перехваты, такие как useState. Посмотрите следующее видео, чтобы начать работу с перехватами: https://www.youtube.com/watch?v=O6P86uwfdR0amp;ab_channel=WebDevSimplified