React 事件以及form 表单中的应用;
初步探索:
记录代码手法:数据的双向绑定:
import React from 'react'
import './../assets/css/common.css'
const o_price = 20;
const o_num = 1;
class Model extends React.Component {
constructor(props) {
super(props);
this.state = {
price: o_price,
num: o_num,
sum: o_price*o_num,
dev: 1
}
}
setValue(e) {
let pession = {};
let value = e.target.value;
let name = e.target.name;
pession[name] = parseInt(value);
if(name == "num"){
pession['sum'] = this.state.price*value;
}else{
pession['sum'] = this.state.num*value;
}
pession['dev'] = (pession['sum']-this.state.sum)/this.state.sum;
//setState 方法是yibu
this.setState(pession)
}
getSum(e) {
}
render() {
return (
<div>
<div className="form-control">
默认价格: <span className="label">{o_price}</span>
默认数量: <span className="label">{o_num}</span>
</div>
<div className="form-control">
<span className="label">单价:</span>
<input onChange={(e)=>this.setValue(e)} type="number" defaultValue={this.state.price} name="price"/>
</div>
<div className="form-control">
<span className="label">数量:</span>
<input onChange={(e)=>this.setValue(e)} type="number" defaultValue={this.state.num} name="num" />
</div>
<div className="form-control">
<span className="label">总价:</span>
<input type="number" onChange={(e)=>this.getSum(e)} value={this.state.sum} name="sum"/>
</div>
<div>
</div>
</div>
)
}
}
export default Model;