Question

假设我有以下代码：

class todo extends React.component {

 handleChange = (e) => {
  console.log(e) // clicking on e => target shows null
  console.log(e.target.value) // shows data
 }


 render () {
  return (
    <div> <form> <input type="text" onClick={this.handleChange} /> </form> </div>
   )
 }

}

我不明白，如果您只是conosole.log(e)

，为什么控制台日志中的事件显示为空

但是如果我console.log(e.target.data)

，它会显示数据

有人知道为什么会这样吗？

Answer 1

这是因为您正在记录对象引用。浏览器devtools不会立即呈现对象及其值，而是稍后对其进行评估。到那时，target已从事件中删除，出于卫生原因，请对其进行清理。

MDN的建议是JSON化对象并返回。

console.log(JSON.parse(JSON.stringify(obj)))

为什么我的事件处理程序将target显示为null？

1 个答案: