需求: 自定义组件, 功能说明如下
1, 显示 h2 标题, 初始文本为: 你喜欢我
2, 点击标题更新为: 我喜欢你
第一步: 初始化状态值并渲染组件标签
组件只有两种状态,"我喜欢你" 和 "你喜欢我", 因此只需要定义一个布尔变量, 通过更新布尔变量的值, 控制两种情况的渲染.
- <!DOCTYPE html>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>
- Document
- </title>
- <script src="../js/react.development.js">
- </script>
- <script src="../js/react-dom.development.js">
- </script>
- <script src="../js/babel.min.js">
- </script>
- </head>
- <body>
- <div id="test">
- </div>
- </body>
- </HTML>
- <script type="text/babel">
- class LikeComponent extends React.Component{
- // 初始化状态
- constructor(props){
- super(props)
- this.state={
- islike:false,
- }
- }
- render(){
- const {islike} = this.state;
- return <h2>{islike?'我喜欢你':'你喜欢我'}</h2> // 读取某个状态值
- }
- }
- ReactDOM.render(<LikeComponent/>,document.getElementById("test"));
- </script>
第二步, 做交互, 通过点击文本 ----> 改变布尔值 -----> 来更新状态
<!DOCTYPE HTML> <HTML lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> Document </title> <script src="../js/react.development.js"> </script> <script src="../js/react-dom.development.js"> </script> <script src="../js/babel.min.js"> </script> </head> <body> <div id="test"> </div> </body> </HTML>
<script type="text/babel"> class LikeComponent extends React.Component{ // 初始化状态 constructor(props){ super(props) this.state={ islike:false, } this.stateChange=this.stateChange.bind(this); // 将新增方法中的 this 强制绑定为组件对象 } stateChange(){ console.log(this);//LikeComponent const islike=!this.state.islike; // 得到状态并取反, 不能这样写 const {islike}=!this.state; this.setState({islike});// 更新状态 } render(){ const {islike}=this.state;// 读状态 return <h2 onClick={this.stateChange}>{islike?'我喜欢你':'你喜欢我'}</h2> } } ReactDOM.render(<LikeComponent/>,document.getElementById("test")); </script>
来源: http://www.bubuko.com/infodetail-3459342.html