向输入字段添加箭头函数会导致错误答案

【问题标题】：Adding an arrow function to input field results an error向输入字段添加箭头函数会导致错误
【发布时间】：2020-02-19 11:51:49
【问题描述】：

这是我正在处理的一个 React 类：

import React from 'react';

export default class ExpenseForm extends React.Component {
    state = {
        title: ''
    };

    onTitleChange = (e) => {
        const title = e.target.value;
        this.setState(() => ({title}));
    };

    render() {
        return (
            <div>
                <form>
                    <input
                        type='text'
                        placeholder='title'
                        value={this.state.title}
                        onChange={(e) => this.setState(() => ({title: e.target.value}))}
                        required autoFocus/>
                    <textarea placeholder='Add a note for your expense'/>
                    <input type='number' placeholder='amount' required/>
                    <input type='submit' value='Add Expense'/>
                </form>
            </div>
        );
    }
}

这会在执行onChange 时引发错误Uncaught TypeError: Cannot read property 'value' of null。

但是当我将 onChange 的内部 js 重组为一个单独的函数 onTitleChange 并调用该函数：onChange={this.onTitleChange} 时，它可以完美运行。这种行为背后的原因可能是什么？

【问题讨论】：

标签： reactjs setstate

【解决方案1】：

在这里您将 onchange 事件分配为onChange={(e) => this.setState(() => ({title: e.target.value}))}，这里e.target.value 将不起作用，因为它在setState() 范围内。

扩展你的功能，我们会得到

function(e){
   this.setState(function(){
     return {
       title: e.target.value
     }
   })
}

这里setSate()里面的函数中没有e，所以e.target.value会报错；

由于你不想和之前的值比较，只需要将值设置为title，你可以使用like

onChange={(e) => this.setState({title: e.target.value})}

setState内部不需要额外的函数

【讨论】：

【解决方案2】：

我猜，您的参数 e 在内部箭头函数中是未知的。你可以这样写：

<input
  type='text'
  placeholder='title'
  value={this.state.title}
  onChange={e => this.setState({ title: e.target.value })}
  required
  autoFocus
/>

【讨论】：

【解决方案3】：

这是因为 React 使用了event pooling，而 setState 是一个在异步上下文中执行的函数，所以你在异步 setState 回调中将它们视为空值。

您需要使用e.persist() 持久化事件或将event 的值保存到变量中，就像您的方法一样。

【讨论】：

【解决方案4】：

您不需要在setstate 中使用箭头函数。

改变 onChange={(e) => this.setState(() => ({title: e.target.value}))}

到： onChange={(e) => this.setState({title: e.target.value})}

【讨论】：

当你需要访问之前的状态时，使用setState中的箭头函数