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
    ...
  }