#javascript #reactjs #components
#javascript #reactjs #Компоненты
Вопрос:
При попытке прочитать входное значение оно всегда будет указывать undefined, несмотря ни на что, даже если я делаю это в самой консоли.
это мой код:
render() {
return (
<div onLoad={Startup()}>
<input onKeyUp={CheckInput} id={"messageinput"} placeholder={"Bericht verzenden..."}
className={"messageinput"}/>
<img className={"messageinputoption"} src={require('./Images/defaultPF.png')}/>
<img className={"messageinputoption"} src={require('./Images/defaultPF.png')}/>
<img className={"messageinputoption"} src={require('./Images/defaultPF.png')}/>
</div>
);
}
}
export default Server;
function CheckInput(event) {
const input = document.getElementById("messageinput");
if (event.keyCode === 13) {
if (IsCommand(input.value)) {
let command = CheckCommand(input.value.substring(1, input.value.indexOf(" ")), input.value.substring(input.value.indexOf(" ") 1));
} else {
SendMessage(input.value);
}
input.value = "";
}
}
Комментарии:
1. Вы действительно не должны запрашивать DOM, вместо этого используйте ссылки, вот почему вы используете React.
2. Насколько я знаю, ключевые события запускаются до того, как какой-либо текст фактически записывается во входные данные, поэтому значение вашего ввода все еще не определено, когда вы пытаетесь его прочитать.
Ответ №1:
Я не могу воспроизвести вашу проблему getElementById
, но я предлагаю вам использовать currentTarget
для извлечения Element
, что делает CheckInput
функцию более многоразовой. Просто измените объявление входной переменной на:
const input = event.currentTarget;
Или, что еще лучше, переработайте свой ввод в контролируемый ввод. См . https://reactjs.org/docs/forms.html .