react 基础学习

深藏阁楼爱情的钟 2022-05-26 12:30 210阅读 0赞

## 1、安装 react  ##

$ cnpm install -g create-react-app     //全局安装 react
    $ create-react-app my-app              //创建项目
    $ cd my-app/                           //进入项目
    $ npm start                            //启动项目

## 2、定义组件 ##

class Clock extends React.Component {  //创建组件
    		  constructor(props) {   //构造方法
    		    super(props);
    		    this.state = {     //数据源
    		    	date: new Date(),
    		    };
    		  }
    		  componentDidMount() {  //在将组件输出呈现给DOM后，该钩子运行。这是设置计时器的好地方：
    		    
    		  }
    		
    		  componentWillUnmount() {
    		    
    		  }
    			
    		  render() {
    		    return (
    		      <div>
    		        <h1>Hello, world!</h1>
    		        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
    		      </div>
    		    );
    		  }
    		}
    		//把组件装进 root 
    		ReactDOM.render(
    		  <Clock />,
    		  document.getElementById('root')
    		);

## 3、数据渲染 ,静态数据： \{ this.state.xx \}  ##

render() {
    		    return (
    		      <div>
    		        <h1>Hello, world!</h1>
    		        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
    		      </div>
    		    );
    		  }

## 4、操作方法  ##

**方法1：在标签的 onClick把 event 传入要执行的方法  \{(e)=>this.handleClick(e)**

render() {
    		    return (
    		      <div>
    		        <button onClick={(e)=>this.handleClick(e)}>
    			     {this.state.isToggleOn ? 'ON' : 'OFF'}
    			 </button>
    		      </div>
    		    );

**方法2：在构造方法 constructor 里 加上 bind     this.handleChange = this.handleChange.bind(this);**

class App extends Component {
    	constructor(props) {
                super(props);
                this.state = {
        	        isToggleOn: true,
                };
        
        this.handleChange = this.handleChange.bind(this);
      }
    	
    	handleClick(){
    		this.setState({isToggleOn : !this.state.isToggleOn})
    		console.log(this.state.selectValue)
    	}
      render() {
      	const isToggleOn = this.state.isToggleOn;
            return (
              <div className="App">
                <button onClick={this.handleClick}>
    	      {this.state.isToggleOn ? 'ON' : 'OFF'}
    	    </button>
              </div>
            );
      }
    }

## 5、循环数据  map 方法， ##

这里有个要注意的点就是

1、在 循环的 html 里加上一个唯一的 key ，不然会报错

2、 List 方法要写在组件的外面

## 6、表单：用 onChange 方法改变 state 的值 ##

class App extends Component {
    	constructor(props) {
                super(props);
                this.state = {
        	        value : '',
        	        selectValue : '1'
                };
        
                this.handleChange = this.handleChange.bind(this);
                this.selectChange = this.selectChange.bind(this);
          }
    	
    	handleChange(e){
    		this.setState({value : e.target.value})
    	}
    	
    	selectChange(e){
    		this.setState({selectValue : e.target.value});
    	}
    	
      render() {	
        return (
          <div className="App">
            <input type="text" value={this.state.value} onChange={this.handleChange} />
            {this.state.value}
            <select value={this.state.seleceValue} onChange={this.selectChange}>
            	<option value="1">第1个</option>
            	<option value="2">第2个</option>
            	<option value="3">第3个</option>
            	<option value="4">第4个</option>
            </select>
          </div>
        );
      }
    }