javascript - 为什么“这个”会丢失？

Question

我会在访问 onFormSubmit 内部的状态时出错，因为当 onFormSubmit 被称为“this”时丢失了。我无法找出渲染函数中发生了什么，导致它失去了对我们组件类的“this”引用。

1. 我知道我可以通过使用箭头函数来解决这个问题，因为他们从周围环境或词汇中获取“this”。
2. 也可以通过使用 bind() 来解决。

      class SearchBar extends React.Component{
        state = {term:  'Hi There'};
        onFormSubmit(e){
            console.log(this.state.term)
            
        }
        render(){
            return (
                <div className="ui segment">
                   <form onSubmit={this.onFormSubmit} className="ui form">
                       <label>Image Search</label>
                       <input  type="text" value={this.state.term} onChange={(e) => {
                                                            this.setState({term: e.target.value})
                                                        }}/>
    
                   </form>
                </div>
            )
        }
    }
    
    export default SearchBar;

标签： javascriptreactjs