一、數(shù)據(jù)綁定

類似 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 是單向數(shù)據(jù)綁定，所以還要額外增加 onChange 函數(shù)來實時獲取輸入框中的值

一、遍歷

類似 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;