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就是组件内部传递出来的参数,在调用时,是不需要在外面显示传递的

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 106,392评论 12 127
  • 下载安装搭建环境 可以选npm安装,或者简单下载一个开发版的vue.js文件 浏览器打开加载有vue的文档时,控制...
    冥冥2017阅读 4,173评论 0 42
  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 911评论 0 6
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 3,581评论 0 30
  • 自己最近的项目是基于react的,于是读了一遍react的文档,做了一些记录(除了REFERENCE部分还没开始读...
    潘逸飞阅读 2,043评论 1 10