javascript-使用“ this”关键字的React类行为
作者:互联网
为什么我需要在onChange处理程序中为handleChange添加bind(this)以具有正确的this关键字?
class SearchBar extends React.Component{
constructor(props){
super(props);
}
handleChange(){
console.log(this)
this.props.onUserInput(
this.refs.filterTextInput.value,
this.refs.inStockOnlyInput.checked
);
}
render() {
return (
<form>
<input
type="text"
placeholder="Searrch...."
value={this.props.filterText}
ref="filterTextInput"
onChange={this.handleChange.bind(this)} // the bind(this) is needed if not this in handleChange became undefined
/>
<p>
<input
type="checkbox"
checked={this.props.inStockOnly}
ref="inStockOnlyInput"
onChange={this.handleChange}
/>
{' '}
only show products in stock
</p>
</form>
);
}
}
解决方法:
这是因为通过新的React扩展了Component语法,他们像在旧的.createClass语法中一样,在组件创建时删除了自动绑定.默认情况下,使用es2015中的类语法,您必须将其绑定到方法上才能使用this类,因此在这里也是如此.
您可以在this changelog博客文章中了解React做出此更改的决定.
标签:reactjs,react-native,javascript 来源: https://codeday.me/bug/20191118/2032229.html