react初学_2(prevState)
直接上代码
<script type="text/babel"> class Toggle extends React.Component { constructor(props) { super(props); this.state = {isToggleOn: true}; // 这边绑定是必要的,这样 `this` 才能在回调函数中使用 this.handleClick = this.handleClick.bind(this); } handleClick() { this.setState((prevState) => ({ isToggleOn: !prevState.isToggleOn })); } render() { return ( <button onClick={this.handleClick}> {this.state.isToggleOn ? 'ON' : 'OFF'} </button> ); } } ReactDOM.render( <Toggle />, document.getElementById('example') ); </script>
代码是抄的,开始看不懂
handleClick() { this.setState((prevState) => ({ isToggleOn: !prevState.isToggleOn })); }
其实这个里面的prevState是代码上一个状态的state
而setState里面可以放函数也可以放对象,
刚开始是放了一个函数
(prevState) => ({ button: !prevState.button })
这是一个箭头函数,注意后面{}外面要加(),因为它代表返回,最后要返回一个对象给setState,就像刚开始的时候setState的用法
还有一点就是注意onClick里面的函数不要加()