Блог

Главная - Вопросы по программированию - Как изменить текст в текстовой области с помощью реактивных крючков?

Как изменить текст в текстовой области с помощью реактивных крючков?

#javascript #reactjs #react-hooks

#javascript #reactjs #реагирующие крючки

Вопрос:

Я хочу изменить текст, написанный в текстовой области, с помощью реактивных крючков. Но у меня проблема с чтением текста из текстовой области.

 const uCyr = function uCyr() {
var entered_text;
entered_text = document.getElementById("textarea").value;
entered_text = entered_text.replace(/a/g, "b");
document.getElementById("textarea").style.color = "#9C27B0";
document.getElementById("textarea").value = entered_text;
};

экспорт uCyr по умолчанию;

Песочница ссылок

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

1. это ванильный JS-код, который не имеет ничего общего с React. И вообще, вы не должны смешивать этот стиль кода с document.getElementById и так далее с React.

Ответ №1:

Вы будете выполнять большинство встроенных действий для значений React и использовать обработчики onChange для их обновления.

 const [text, setText] = useState("");

<textarea className="textarea" value={text} onChange={(e) => setText(e.target.value)}/>

Если вы создаете состояние для значения текстовой области, а затем используете вторую строку в качестве jsx для текстовой области, это должно сработать.