Блог

Главная - Вопросы по программированию - Чтение входного значения всегда возвращает неопределенный ReactJS

Чтение входного значения всегда возвращает неопределенный ReactJS

#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 .