第一个实例

新建一个组件Xiao.js

import React, {Component} from "react";

class Xiao extends Component {
    render() {
        return (
            <div>
                <div><input /> <button>增加</button></div>
                <ul>
                    <li>头部</li>
                    <li>部</li>
                </ul>
            </div>

        );
    }
}

//组件暴露，让外界引用
export default Xiao

　　

 注意：

 用Fragment

 数据绑定

 这时候界面：

但是在输入框中无论怎么输入，都没有反应。这时候就需要事件绑定

import React, {Component, Fragment} from "react";

class Xiao extends Component {
    //构造函数,所有数据写在state中,初始化，固定写法
    constructor(props) {
        super(props);
        this.state = {
            inputValue:'jsPang',
            list:[]
        }
    }

    render() {
        return (
            <Fragment>
                <div>
                    <input value={this.state.inputValue} onChange={this.inputChange.bind(this)}/>
                    <button>增加</button>
                </div>
                <ul>
                    <li>头部</li>
                    <li>部</li>
                </ul>
            </Fragment>

        );
    }

    inputChange(e){
        //console.log(e.target.value)
        //this.state.inputValue = e.target.value
        this.setState({
            inputValue: e.target.value
        })
    }
}

//组件暴露，让外界引用
export default Xiao