基本语法

1、组件

//Tips:每一个页面级的组件必须加下面这行代码
import React from 'react';

2、无状态组件(函数)

import React from 'react';
function App(){
    return {
        <div className="App">
      Hello world
        </div>
    }
}

3、有状态组件

import React from 'react';
class App extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      msg:"hello world"
    }
  }
  render(){
    return (
    <div>{this.state.msg}</div>
    )
  }
}
//jsx
export default App;

4、事件

import React from 'react';
class App extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      msg:"hello world"
    }
  }
  render(){
    return (
    <div onClick="{this.handleClick}">{this.state.msg}</div>
    )
  }
  handleClick(){
    console.log(1)
  }
}
//jsx
export default App;

5、改变事件内部this关键字的指向 bind(this)

import React from 'react';
class App extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      msg:"hello world"
    }
  }
  render(){
    return (
        //bind(this)改变this关键字的指向
    <div onClick={this.handleClick.bind(this)}>{this.state.msg}</div>
    )
  }
  handleClick(){
    this.setState({
      msg:"change"
    })
  }
}
//jsx
export default App;

render(){
   return (
   <div onClick={this.handleClick}>{this.state.msg}</div>
   )
 }
 handleClick=()=>{
   this.setState({
     msg:"change"
   })
}

6、事件传参 bind(this,””)

//Tips:传递参数一定要加bind bind(this,"")

render(){
    return (
    <div onClick={this.handleClick.bind(this,"good")}>{this.state.msg}</div>
    )
  }
  handleClick=(val)=>{
    console.log(val)
    this.setState({
      msg:"change"
    })
  }

7、获取input值(获取键盘码)

class App extends React.Component{
  constructor(props){
    super(props);
    this.state = {
    }
  }
  render(){
    return (
      <div>
        <input text="text" onKeyUp={this.handleKeyUp} />
      </div>
    )
  }
  handleKeyUp=(event)=>{
    console.log(event.keyCode)
  }
    componentDidMount() {
    console.log("1")
  }
}

8、获取input输入框的值

<input type="text" placeholder="添加ToDo" onChange={this.handleAdd.bind(this)} 
defaultValue={this.state.value} />

constructor(props){
    super(props);
    this.state = {
      value:''
    }
  }

handleAdd(event){
  console.log(event.target.value)
  this.setState({
      value:event.target.value
  })
}

9、if-else

class App extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      isShow:true
    }
  }
  render(){
    return (
      <div>
        {this.Message()}
      </div>
    )
  }
  Message(){
    if(this.state.isShow){
      return (<span>显示</span>)
    }else{
      return (<span>隐藏</span>)
    }
  }
}

10、三元

class App extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      isShow:true
    }
  }
  render(){
    return (
      <div>
        <p>{this.state.isShow?'good':'hello world'}</p>
        </div>
      </div>
    )
  }
}

11、循环(for map)

class App extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      arr:[1,2,3]
    }
  }
  render(){
    return (
      <div>
        <div>{this.state.arr.map(item=>{
          return (<p>{item}</p>)
        })}
        </div>
      </div>
    )
  }
}

12、input实现双向数据绑定

//index.js
import React , {Component} from 'react';
import {Input} from 'antd';
class App extends Component {
  constructor (props){
    super(props)
    this.state = {
      userName:"li"
    }
  }
  render() {
    return (
      <div>
        <Input type="text" value={this.state.userName} onChange={this.handleChange} />
        <p>{this.state.userName}</p>
      </div>
    )
  }
  handleChange=(e)=>{
    this.setState({
      userName:e.target.value
    })
  }
}
export default App;

13、内联样式

<p style={{width:200,margin-top:"10px"}}>hello world</p>