Question

我已经在React.js中创建了一个基于类的组件，在其中我只使用JSX创建了一个输入。我想在使用时在输入字段中编写状态时更新状态，到目前为止，您还不了解。在下面的代码中，请注意我处理输入的方法的实现：

class SearchButton extends Component{
    constructor(props){
        super(props);
        this.state={
            searchTerm:""
        }
    }

    handleSearchChange(e){
        this.setState({searchTerm:e.target.value})
    }

    render(){
        return(
            <div><input value={ this.state.searchTerm } onChange={this.handleSearchChange} /><br />
            { this.state.searchTerm }
            </div>
        )
    }
}

export default SearchButton;

使用上面的代码，当我在输入字段中输入一些值时，出现以下错误：

bundle.js:19524 Uncaught TypeError: Cannot read property 'setState' of undefined
    at handleSearchChange (bundle.js:19524)

但是在输入处理方法中，我用handleSearchChange(e){this.setState({searchTerm:e.target.value})}这样的粗箭头功能替换了handleSearchChange=(e)=>{this.setState({searchTerm:e.target.value})}，一切都很好。它解决了我的问题，但我不知道为什么？箭头功能是什么？带来了与第一个实现不同的地方？

Answer 1

使用箭头功能=>时，将使用父级的this。

setState是Component的一方，因此属于handleSearchChange方法的父级。

使用handleSearchChange(e){...}时，this是指当前方法，因此无法访问setState。

如果您被迫使用常规函数语法而不是箭头函数，则需要在构造函数中绑定该方法。

class SearchButton extends Component{
    constructor(props){
        super(props);
        this.state={
            searchTerm:""
        }

        this.handleSearchChange = this.handleSearchChange.bind(this);
    }

    handleSearchChange(e){
        this.setState({searchTerm:e.target.value})
    }
...

Answer 2

在react class组件中， this 关键字必须始终引用类上下文。普通功能失去了 this 的绑定。箭头函数没有 this ，并在类的上方上下文中搜索 this 。检查differenc explaind in details

方法在基于React.js类的组件中无法正常工作

2 个答案: