InputText组件导致TypeError：在文本框中键入内容时e.target为空PrimeReact库，使用箭头功能

编程问答 2022-06-11

问题描述

我正在使用PrimeReact，并且有一个人员数据表：

enter image description here

选择任何行时，将显示一个带有下拉菜单，复选框和文本输入的子面板：

enter image description here

文本输入代码：

<div className="p-col-4">
    <InputText id="first-name"
               value={this.state.selectedEntity.firstName}
               onChange={(e) => this.setState(state => (state.selectedEntity.firstName = e.target.value))} />
</div>

我将名的状态保留在名为selectedEntity的嵌套属性中。那是关于setState调用中唯一的非直截了当的构造。但是，这会在我键入以下内容时给我浏览器错误：

enter image description here

问题：

怎么了？

这是PrimeReact中的错误吗？

我正在使用PrimeReact 5.0.0-rc2。

编辑1：

顺便说一下，您在此处看到的下拉菜单和复选框似乎与箭头功能配合使用。相似代码：

下拉菜单：

<div className="p-col-4">
    <Dropdown optionLabel="name"
              optionValue="gender"
              value={this.state.selectedEntity.gender}
              options={[{"gender": "MALE","name": "Mr"},{"gender": "FEMALE","name": "Mrs"}]}
              onChange={(e) => this.setState(state => (state.selectedEntity.gender = e.value))}
              placeholder="Select a gender" />
</div>

复选框：

<div className="p-col-4">
    <CheckBox inputId="incognito"
              value="Incognito"
              checked={this.state.selectedEntity.incognito}
              onChange={(e) => this.setState(state => (state.selectedEntity.incognito = e.checked))} />
</div>

编辑2：

我在这里创建了一个测试用例：

https://codesandbox.io/s/primereact-test-forked-4blln?file=/src/index.js

对我来说像个虫子...

解决方法

要使InputText的{​​{1}}事件处理程序接受给定形式的箭头功能，还必须在onChange之前使用e.persist()：

所以不是

setState( ... )

使用

onChange={(e) =>
   this.setState((state) => (state.selectedEntity.firstName = e.target.value))
}

请参阅

github.com/primefaces/primereact/issues/1600

完整的讨论。

PS：在撰写本文时，onChange={(e) => { e.persist(); this.setState((state) => (state.selectedEntity.firstName = e.target.value)) }} 和Dropdown组件为何不需要此答案的答案仍待定。

primereactreactjsreactjsreactjsreactjs