最近公司用reactjs做開發(fā)涂臣，雖然網(wǎng)上很多教程惨险，但實際開發(fā)中許多細小的技術(shù)點還是需要自己去偶遇
1.事件傳參技巧
-
問題描述
我們在事件中通常需要獲取控件的值羹幸，通常通過event.target.value的方式來取值，在綁定事件時辫愉，event參數(shù)也不需要傳遞栅受，在方法中直接使用即可。
但是恭朗，有些時候需要傳入一些其他的參數(shù)屏镊，比如需要循環(huán)綁定一些輸入框，在綁定onChange事件時痰腮，需要傳入索引index和數(shù)據(jù)源的索引進行對應(yīng)
onHandleChange(index,event){
let val=event.target.value
}
//關(guān)鍵代碼
source.map((item,index)=>{
return <input type="text" value={item.name} onChange={this.onHandleChange.bind(this,index)} />
});
-
代碼解釋
有的同學應(yīng)該已經(jīng)看出區(qū)別了而芥，onHandleChange在聲明時有兩個參數(shù)，但在調(diào)用時卻只傳遞了一個參數(shù)膀值，這就是今天要講的:
在給方法傳遞新參數(shù)時棍丐，方法原有的參數(shù)會排在新參數(shù)之后
做過reactjs的同學都知道，event這個參數(shù)是不需要手動傳遞的沧踏，直接在方法中聲明就可以使用歌逢，如下代碼：
onChangeHandle(event){
let val=event.target.value;
}
render(){
return (<div>
<input type="text" onChange={this.onChangeHandle.bind(this)} />
</div>)
}
2.擴展閱讀
- 描述
在自定義組件時，組件的事件由父組件傳入悦冀，但為了方便趋翻，我們可能在自定義組件中把需要的數(shù)據(jù)回傳給富組件傳遞過來的方法睛琳，如下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
}
- 組件調(diào)用
import WDropdwonList from '../wigets/w-dropdwon-list.js';
//第一個參數(shù)就是下面調(diào)用控件時傳遞的參數(shù)盒蟆，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>)
}
- 講解：
下拉框事件中 踏烙，當前選中項經(jīng)常使用，因此封裝到了自定義組件中历等，但是在使用自定義組件時讨惩，會需要傳遞進去數(shù)據(jù)源的一些其他參數(shù)，比如上面的currentMan,該參數(shù)在調(diào)用事件方法時寒屯，像正常一樣傳遞荐捻，沒區(qū)別，只是在聲明事件方法時寡夹，事件方法“隱含”的參數(shù)放在新傳遞的參數(shù)之后就行处面，如上面事件方法的定義，item就是組件內(nèi)部傳遞出來的參數(shù),在調(diào)用時菩掏，是不需要在外面顯示傳遞的
