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

Question

这是一个 React class 我正在研究：

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}，它工作得很好。这种行为背后的原因可能是什么？

Answer 1

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

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

Answer 2

这是因为 React 正在利用 event pooling 并且 setState 是在异步上下文中执行的函数，因此您在异步 setState 回调中将它们观察为空值。

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

Answer 3

此处您将 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

里面不需要额外的函数

Answer 4

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

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

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

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

Adding an arrow function to input field results an error

setstate

reactjs