react components bind
react组件方法传递
组件.js
代码部分(完整)
import React, { Component } from 'react'
import '../assets/fonts/iconfont.css'//图标样式
import '../assets/styles/boxList.less'//组件样式
import Modal from 'antd-mobile/lib/modal'//对话框组件
export default class BoxList extends Component {
// 修改某条数据
changeData(oneMessage) {
this.props.changeData(oneMessage)
}
// 删除某条数据
delData(oneMessage) {
const that = this
Modal.alert('删除不可撤回', '确认删除此条数据?', [
{ text: '取消' },
{ text: '确认', onPress: () => that.props.delData(oneMessage) },
])
}
render() {
return (
<div className='boxList'>
{this.props.data.map((v, k) => {
return (
<div className="list" key={v.ip}>
<div className="row">
<span className="text">盒子编号:</span>
<span className="content" >{v.boxId}</span>
</div>
<div className="row">
<span className="text">设备类型:</span>
<span className="content" >{v.equipmentType}</span>
</div>
<div className="row">
<span className="text">产品型号:</span>
<span className="content" >{v.productModel || '无'}</span>
</div>
<div className="row">
<span className="text">机床名字:</span>
<span className="content" >{v.name}</span>
</div>
<div className="row">
<span className="text">机床I P:</span>
<span className="content" >{v.ip}</span>
</div>
<div className="row">
<span className="text">机床产线:</span>
<span className="content" >{v.line || "无"}</span>
</div>
<div className="btnBox0">
<button size="mini" className="btn0 btn1" onClick={this.changeData.bind(this, v)}>
<i className="iconfont icon-xiugai"></i>
</button>
<button size="mini" className="btn0 btn2" onClick={this.delData.bind(this, v)}>
<i className="iconfont icon-shanchu1"></i>
</button>
</div>
</div >
)
})
}
</div >
)
}
}
)
页面.js
代码 (截取核心部分)
import BoxList from '../components/BoxList'//组件:盒子信息列表
<div className="listBox">
<BoxList data={this.state.boxIdMessage} changeData={this.changeData} delData={this.delData.bind(this)}></BoxList>
</div>
// 删除某条数据
delData(oneMessage) {
const that = this
...
}