reactjs - InputText 组件导致 TypeError: e.target is null when typing into text box (PrimeReact library, using arrow function)

Question

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

选择任何行时，会显示一个子面板，其中包含下拉菜单、复选框和文本输入：

文字输入代码：

<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。但是，一旦我键入，这就会在浏览器中出现错误：

问题：

怎么了？

这是 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

对我来说似乎是一个错误......

Answer 1

要让InputText的onChange事件处理程序接受给定形式的箭头函数，您还必须使用e.persist()before setState( ... )：

所以而不是

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

利用

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

请参见

github.com/primefaces/primereact/issues/1600

完整的讨论。

DropdownPS：在撰写本文时，关于为什么and组件不需要它的答案Checkbox仍然悬而未决。