今天才到一个坑,主要是想给一个组件增加一个属性,开始名字随便取,但是发现在, 也获取不到,最后才发现,新的标注一点要以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>);
}};