读取输入值总是返回未定义的ReactJS

如何解决读取输入值总是返回未定义的ReactJS

尝试读取输入值时，即使我在控制台中自己进行操作，也总是会说不确定的内容。

这是我的代码：

    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 = "";
    }
}

解决方法

我无法使用getElementById复制您的问题，但是我建议您使用currentTarget来获取Element，从而使CheckInput函数更具可重用性。只需将输入变量声明更改为：

const input = event.currentTarget;

或者更好的是，将您的输入重做为受控输入。参见https://reactjs.org/docs/forms.html。