react 的双向数据绑定

发布时间：2020-12-15 20:22:51 所属栏目：百科来源：网络整理

导读：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个步骤 //引入react import Re

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

    })
  }

效果：

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!