Question

我这个问题已经有一段时间了，所以我希望在这里找到答案。我试图实现一个基于the code given in the react docs的简单选择标签。但是，这对我不起作用。这是我编写的代码：

id

这是调用onChange的函数

<select value={this.state.formId} onChange={this.handleInternalFormChange}>
                        {
                            Object.keys(this.state.userForms).map(formKey => ( 
                                <option key={formKey} value={formKey} > {this.state.userForms[formKey]} </option>
                            ))
                        }

进行这些更改后，onChange函数似乎不起作用。我试图打印出被调用的事件，但似乎不包含handleInternalFormChange = (e) =>{ this.setState({ formId: e.target.value }) console.log(this.state.formId); }。不知道该怎么办，有人可以帮忙吗？

Answer 1

您目前的操作方式没有任何问题。您的console.log()未打印出状态的原因是因为setState()是异步的（顺便说一下，console.log()也是异步的）。如果您想查看更新后的状态是什么，请使用setState()的第二个参数，该参数为您提供新值。

您可以通过将函数调用替换为：

来确认onChnage()中正在使用该事件。

<select onChange={e=>console.log(e.target.value)}>

如果要在状态更新后检查该值，请执行以下操作：

this.setState({value}, updatedState=>console.log(updatedState));

希望可以帮助解决问题

Answer 2

如果您想获得console.log的结果，请选中此

 handleInternalFormChange = (e) =>{
        this.setState({
            formId: e.target.value
        }, () => {
           console.log(this.state.formId);
        })

    }

反应onChange功能不适用于选择标签

2 个答案: