一、数据绑定

类似 Vue 的 v-model，

        this.state = {
            val: 1,
            companies: ["阿里巴巴", "腾讯", "百度", "京东"],
        };


companyNameUpdate(e) {
        this.setState({
            companyName: e.target.value
        })
    }


<input value={this.state.companyName} onChange={this.companyNameUpdate}/>

本例中，由于 React 是单向数据绑定，所以还要额外增加 onChange 函数来实时获取输入框中的值

一、遍历

类似 Vue 的 v-for，通过 js 的 map 操作

            <ul>
                {
                    this.state.list.map((item,index)=>{
                        return <li>{item}</li>
                    })
                }
            </ul>  

三、绑定事件

如使用 onClick，即点击时的事件，类似 Vue 的 @change

<button onClick={this.addCompany}>增加公司</button>

四、附代码

import React, {Fragment} from "react";

class ParentTest extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            companies: ["阿里巴巴", "腾讯", "百度", "京东"],
            companyName: ""
        };
        this.addCompany = this.addCompany.bind(this);
        this.companyNameUpdate = this.companyNameUpdate.bind(this)
    }

    addCompany() {
        this.setState({
            companies: [...this.state.companies, this.state.companyName],
            companyName: ""
        })
    }

    companyNameUpdate(e) {
        this.setState({
            companyName: e.target.value
        })
    }

    render() {
        return (
            <Fragment>
                <input value={this.state.companyName} onChange={this.companyNameUpdate}/>
                <button onClick={this.addCompany}>增加公司</button>
                {this.state.companies.map((item, index) => {
                    return <div key={index}>{item}</div>
                })}
            </Fragment>
        )
    }

}

export default ParentTest;