reactjs中事件传参

最近公司用reactjs做开发，虽然网上很多教程，但实际开发中许多细小的技术点还是需要自己去偶遇

1.事件传参技巧

问题描述
我们在事件中通常需要获取控件的值，通常通过event.target.value的方式来取值，在绑定事件时，event参数也不需要传递，在方法中直接使用即可。
但是，有些时候需要传入一些其他的参数，比如需要循环绑定一些输入框，在绑定onChange事件时，需要传入索引index和数据源的索引进行对应

onHandleChange(index,event){
    let val=event.target.value
}
//关键代码
source.map((item,index)=>{
      return <input type="text" value={item.name} onChange={this.onHandleChange.bind(this,index)} />
});

代码解释
有的同学应该已经看出区别了，onHandleChange在声明时有两个参数，但在调用时却只传递了一个参数，这就是今天要讲的:

在给方法传递新参数时，方法原有的参数会排在新参数之后

做过reactjs的同学都知道，event这个参数是不需要手动传递的，直接在方法中声明就可以使用，如下代码：

onChangeHandle(event){
      let val=event.target.value;
}

render(){
  return (<div>
    <input type="text" onChange={this.onChangeHandle.bind(this)} />
</div>)
}

2.扩展阅读

描述
在自定义组件时，组件的事件由父组件传入，但为了方便，我们可能在自定义组件中把需要的数据回传给富组件传递过来的方法，如下dropdwon控件

import React from 'react';
export default class WDropdownlist extends React.Component
{
   constructor(props) {
     super( props );
     this.state = {
       value: "-1",
       text: "全部",
       selectedValue: 0
    } 
  }
  componentWillReceiveProps(nextProps) {
        this.setState({
            selectedValue: nextProps.selectedValue
        });
   }
  componentWillMount() {
    this.setState({
            selectedValue: this.props.selectedValue
        });
  }
  handleChange(event)
  {
    let _self = this;
    let _props = _self.props;
    this.setState({ selectedValue: event.target.value });
    const currentIndex = event.target.selectedIndex;
    const targetItems = JSON.parse(JSON.stringify(_props.dataSource));
    _props.onChange && _props.onChange.call(_self, {
      currentIndex: currentIndex,
      currentItem: targetItems[currentIndex]
    })
  }
  render() {
    const self = this;
    const props = self.props;
    var state = self.state;
    return (
      <select className={props.className} style={props.style} disabled={props.disabled} onChange={self.handleChange.bind(self) } name={props.name} value={state.selectedValue}>
        {
          ( !props.dataSource||props.dataSource.length==0 ) ?(
          <option value={this.state.value}>{this.state.text}</option>
          ) : (
          props.dataSource.map(( item, index ) =>
                <option key={index} value={item[props.valueField]} >{item[props.textField]}</option> )
          )
        }
      </select>
    );
  }
}
WDropdownlist.defaultProps = {
  style: {},
  valueField: 'value',
  textField: 'text',
  selectedValue:0,
  disabled:false
}

组件调用

import WDropdwonList from '../wigets/w-dropdwon-list.js';
//第一个参数就是下面调用控件时传递的参数，item是定义组件时传递的当前选中项对象
onChangeHandle(currentMan,item){
}
render(){
    return (<div>
       otherSource.map((currentMan,index)=>{
        <WDropdwonList onChange={this.onChangeHandle.bind(this,currentMan)}
                dataSource={this.state.source}
                textField='Display'
                valueField='Value'
                selectedValue={currentSubsystem['PointRoles'][key]||'-1'}  >
        </WDropdwonList>
})
<div>)
}

讲解：
下拉框事件中，当前选中项经常使用，因此封装到了自定义组件中，但是在使用自定义组件时，会需要传递进去数据源的一些其他参数，比如上面的currentMan,该参数在调用事件方法时，像正常一样传递，没区别，只是在声明事件方法时，事件方法“隐含”的参数放在新传递的参数之后就行，如上面事件方法的定义，item就是组件内部传递出来的参数,在调用时，是不需要在外面显示传递的

reactjs中事件传参

1.事件传参技巧

2.扩展阅读

推荐阅读更多精彩内容