Reactjs 将箭头函数添加到输入字段会导致错误

下面是我正在学习的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>
        );
    }
}

从“React”导入React；
导出默认类ExpenseForm扩展React.Component{
状态={
标题：“”
};
onTitleChange=（e）=>{
const title=e.target.value；
this.setState（（）=>（{title}））；
};
render（）{
返回(
this.setState（（）=>（{title:e.target.value}））}
所需自动对焦/>
);
}
}

这会引发一个错误

uncaughttypeerror:在执行
onChange
时无法读取null的属性“value”

但是，当我将
onChange
的内部js重新构造成一个单独的函数
onTitleChange
并调用该函数：
onChange={this.onTitleChange}
，它工作得非常好。这种行为背后的原因是什么？
我想，您的参数e在内部箭头函数中是未知的。
你可以这样写：

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

this.setState（{title:e.target.value}）
必修的
自动对焦
/>
我想，您的参数e在内部箭头函数中是未知的。
你可以这样写：

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

this.setState（{title:e.target.value}）
必修的
自动对焦
/>
这是因为React正在使用，而setState是在异步上下文中执行的函数，因此在异步
setState
回调中将它们视为null

您需要使用
e.persist（）
持久化事件，或者将
event
的值保存到变量中，就像在您的方法中一样。
这是因为React正在使用，而setState是在异步上下文中执行的函数，因此您可以在异步
setState
回调中将它们作为null

您需要使用
e.persist（）
来持久化事件，或者将
event
的值保存到变量中，就像在您的方法中一样。
这里您将onchange事件指定为
onchange={（e）=>this.setState（（）=>（{title:e.target.value}））
，这里
e.target.value
将不起作用，因为它在
setState（）
范围

扩展您的功能后，我们将获得

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

这里
setstate（）
中的函数中没有
e
，因此
e.target.value
将是错误的

因为您不想与以前的值进行比较，只需要将值设置为title，所以可以使用like

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

在
setState
中不需要额外的函数，这里您将onchange事件指定为
onchange={（e）=>this.setState（（）=>（{title:e.target.value}））}
，这里
e.target.value
将不起作用，因为它在
setState（）
范围内

扩展您的功能后，我们将获得

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

这里
setstate（）
中的函数中没有
e
，因此
e.target.value
将是错误的

因为您不想与以前的值进行比较，只需要将值设置为title，所以可以使用like

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

在
setState
中不需要额外的函数，您不需要在
setState
中使用箭头函数

改变
onChange={（e）=>this.setState（（）=>（{title:e.target.value}））}

致：
onChange={（e）=>this.setState（{title:e.target.value}）}
您不需要在
setState
中使用arrow函数

改变
onChange={（e）=>this.setState（（）=>（{title:e.target.value}））}

致：
onChange={（e）=>this.setState（{title:e.target.value}）}
当需要访问上一个状态时，在
setState
内部使用箭头函数当需要访问上一个状态时，在
setState
内部使用箭头函数