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