今天才到一個坑,主要是想給一個組件增加一個屬性盆偿,開始名字隨便取,但是發(fā)現在准浴, 也獲取不到事扭,最后才發(fā)現,新的標注一點要以data-xxx開始乐横。
另外寫一個例子求橄,關于react 自定義組件,并且獲取屬性的demo
export class Modes extends React.Component {
constructor(props) {
super(props);
this.items =
[ {id:1, isOn:this.props.codeLight, name:"冷光"},
{id:2, isOn:this.props.warmLight, name:"暖光"},
{id:3, isOn:this.props.intelligent, name:"智能"}];
}
touchStart(event){
// 這里必須是currentTarget
// 并且屬性的命名一定是 data-index
var index = event.currentTarget.getAttribute('data-index');
console.log(" event " + event + index);
Actions.lightModeAction(index);
}
render() {
//noinspection JSAnnotator
this.items[0].isOn = this.props.codeLight ;
this.items[1].isOn = this.props.warmLight ;
this.items[2].isOn = this.props.intelligent ;
return (
<section className="mode flex" >
{
this.items.map(((o) => {
var status = o.isOn?'on':'off';
return (
<dl className="flex-cell" key={o.id} data-index={o.id} onTouchStart={this.touchStart} >
<dd>
<img src{"../static/img/pic_modebutton_"+o.id+"_"+status+".png"}/></dd>
<dt className={status} >{o.name}</dt>
</dl>);
}).bind(this))}
</section>);
}};