Question

对于为什么我们在react中将e.target.name写入状态定义语句中，我没有明确的具体理解。谁能解释？预先感谢。

checkboxChange(e) {

let state = {
  ...this.state,
  [e.target.name]: !this.state[e.target.name]
};
...

我们为什么写

 [e.target.name]: !this.state[e.target.name]

状态

Answer 1

如果输入的名称是“电子邮件”或“密码”，则可以轻松设置该状态键，而无需为每个输入定义单独的功能。

对于电子邮件和密码，它是这样的：

<input name="email" onChange={this._handleChange} />
<input name="password" onChange={this._handleChange} />

函数应该是

_handleChange = event => {
  this.setState({
    [event.target.name]: event.target.value,
  });
}

在您的情况下，您要设置复选框值，以应用相同的原理。

Answer 2

比方说，在您的状态下，您会遇到以下情况：

WITH json AS (
SELECT '{{  
   "ResponseMsg":{  
      "FileName":"test.json.gz",
      "FilePathStaging":"testpath",
      "Message":"processing",
      "ReqCompressedFlag":"Y",
      "ReqExtMode":"F",
      "Status":"SUCCESS",
      "TableId":327,
      "TgtFileFormat":"CSV",
      "batchId":"1",
      "tgtExtId":"1"
   }}' doc
FROM dual
)
SELECT FileName,
FilePathStaging,
Message,
ReqCompressedFlag,
ReqExtMode,
Status,TableId,TgtFileFormat,batchId,tgtExtId
FROM json_table((select doc from json),'$.jobs[*]' NULL ON ERROR
COLUMNS(FileName VARCHAR2(20) PATH '$.name'))

现在，您可以通过一个简单的复选框来管理该值：

state = {
  privacyAccepted: false
}

将事件处理程序附加到此复选框后，您可以从生成的事件访问目标，例如：

<input
  type="checkbox"
  name="privacyAccepted"
  ...
/>

从目标中，您可以使用以下方式访问复选框属性，例如名称：

<input
  type="checkbox"
  name="privacyAccepted"
  onChange={ this.handlePrivacy }
/>

handlePrivacy = event => {
  event.target // the checkbox element that emitted this event
}

为此，您可以使用通用的handlePrivacy = event => { event.target.name // "privacyAccepted" }事件处理程序，并使用onChange访问event.target.name中与输入名称相同的属性：< / p>

state

这种<input type="checkbox" name="privacyAccepted" onChange={ this.handleChange } /> handleChange = event => { this.setState({ [event.target.name]: event.target.value // ... or what you want here }) }用来访问对象属性以设置值的语法称为[...]，由ES6提供。

我们出于什么目的将e.target.name写入状态定义语句？

2 个答案: