React自学笔记(三)---React键盘事件、表单事件、事件对象以及React中的ref获取dom节点 、React实现类似Vue的双向数据绑定

在根页面APP.js编写：

import React, {
    Component } from 'react';
// import logo from './assets/images/logo.svg';
import './assets/css/App.css';

//引入Home组件
import Home from './components/Home.js'

//引入News组件
import News from './components/News.js'

//引入List组件
import List from './components/List.js'

//引入Todolist组件
import Todolist from './components/Todolist.js'

class App extends Component{
   
  //render 模板   jsx
  render(){
   
    return(
      <div className="App">
        你好react  根组件
        <hr />
        <Home></Home>
        <News></News>
        <List />
        <hr />
        <Todolist />
      </div>
    )
  }
}

export default App;

Home.js:

/*
事件对象、键盘事件、表单事件、ref（参数）获取dom节点、React实现类似vue双休数据绑定

事件对象：在触发DOM上的某个事件时，会产生一个事件对象event。在这个对象中包含着所有与事件相关的信息
*/

import React, {
    Component } from 'react';
import '../assets/css/index.css'


class Home extends Component {
   
    constructor(props) {
   
        super(props);

        //react 定义数据
        this.state = {
   
            msg: '我是home',
            username:''
        }
        // this.run=this.run.bind(this)
    }

    run=(event)=>{
   
        console.log(event);
        // alert(this.state.msg)

        // alert(event.target);
        event.<