#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