react的双向数据绑定

1.初始化数据

constructor() { super(); this.state={ day:'sunday' } }

　　

2.使用jsx必须引入react 

mport React, { Component } from 'react';

 3组件要继承React.Component

class App extends Component {

}

4.index.js 有3个步骤

//引入reactimport React from 'react';//引入reactdomimport ReactDOM from 'react-dom';//引入使用的组件import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

<App />是一个组件

index.js  

一共有3个步骤，

引入react 引入reactdom 引入使用的组件 //引入react import React from 'react'; //引入reactdom import ReactDOM from 'react-dom'; //引入使用的组件 import App from './App'; ReactDOM.render(<App />, document.getElementById('root')); //root 是跟节点的id

App.js

一共有个3步骤

1.引入React，Component

import React, { Component } from 'react';

2.组件继承component

class App extends Component {

 

}

3.将组件暴露出去

export default App;

 

//引入React，Component import React, { Component } from 'react'; //组件继承component class App extends Component { constructor() { super(); this.state={ day:'sunday' } } change(e) { console.log(e.target.value); //赋值，将input 的值赋给this.state.day this.state.day=e.target.value; //通知视图更新 this.setState({ }) } render() { return ( //保证一个跟节点 <div> hello world <br></br> {this.state.day} <br></br> <input type="text" value={this.state.day} onChange={ (e)=>{this.change(e)} }/> </div> ); } } export default App;

　　初始化数据，利用一个构造器

constructor() { super(); //这个是要的 ，不然会报错 this.state={ day:'sunday' } }

　　this.state={

 

     };

数据在这里面进行初始化，类似vue 的   

 data  ()  {

    return{

    }

}

利用change事件来改变视图

<input type="text" value={this.state.day} onChange={ (e)=>{this.change(e)} }/> //传递e 参数

change方法：

 

change(e) { console.log(e.target.value); //赋值，将input 的值赋给this.state.day this.state.day=e.target.value; //通知视图更新 this.setState({ }) }

　　

效果：

 

转载于:https://www.cnblogs.com/guangzhou11/p/9716451.html