Question

我无法获得动态生成组件的价值。我能够定位子组件。但是，我不是要获得子组件的值。不确定我错过了什么。设置有点连线，因为我使用的是Array对象（使用Firebase进行数据库）。小提琴：https://jsfiddle.net/rexonms/g3nscf0h/

// Javascript jsx
<script type="text/jsx">
     var data = {
        a: 'all',
        b: 'ball',
        c: 'cat'
    };



var MyComp = React.createClass({

getInitialState: function(){
    return{
        data: this.props.data
    };
},

handleClick: function(e){
    console.log(e.target);
    console.log(e.target.value)
},


render: function() {
    var o = this.props.data;

    return(
        <div className="words">
            {Object.keys(o).map(function(k) {
                return (
                    <div key={k} className="word" onClick={this.handleClick} value={o[k]}> {o[k]} </div>
                );
            }.bind(this))}
        </div>

    );
}
});



React.render(<MyComp data={data} /> , document.getElementById('container'));


</script>

Answer 1

首先 - 删除内部{o[k]}之前和之后的空格。查看生成的标记，有三个span元素，您试图获得点击范围的value属性。第二 - 我建议使用getAttribute方法获取属性值。我修改了你的小提琴 - https://jsfiddle.net/g3nscf0h/5/

handleClick: function(e){
        console.log(e.target);
        console.log(e.target.getAttribute('data-value'));
}
//...
<div key={k} className="word" onClick={this.handleClick} data-value={o[k]}>{o[k]}</div>

如何在react.js中获取动态创建的组件的值？

1 个答案: