React 组件的 state 和 setState

react

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8" />

<title>React 组件的 state 和 setState</title>

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>

<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

</head>

<body>

<div ></div>

<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() {

console.log(this.state.isToggleOn); //第一次,两次打印的都是 false ,或者都是true

this.setState(prevState => ({

isToggleOn: !prevState.isToggleOn

}));

console.log(this.state.isToggleOn); //第二次,两次打印的都是 false ,或者都是true

this.setState({ count: 0 }) // => this.state.count 还是 undefined

this.setState({ count: this.state.count + 1}) // => undefined + 1 = NaN

this.setState({ count: this.state.count + 2}) // => NaN + 2 = NaN

this.setState((prevState) => {

return { count2: 0 }

})

this.setState((prevState) => {

return { count2: prevState.count2 + 1 } // 上一个 setState 的返回是 count 为 0,当前返回 1

})

this.setState((prevState) => {

return { count2: prevState.count2 + 2 } // 上一个 setState 的返回是 count 为 1,当前返回 3

})

}

render() {

return (

<button onClick={this.handleClick}>

{this.state.isToggleOn ? 'ON' : 'OFF'}

</button>

);

}

}

ReactDOM.render(

<Toggle />,

document.getElementById('root')

);

</script>

</body>

</html>

以上是 React 组件的 state 和 setState 的全部内容, 来源链接: utcz.com/z/382457.html

回到顶部