我是React.js的初学者,需要一些帮助。我想在点击它时从<li>
-tag获取值或数据。我怎样才能做到这一点?
...
clickOnMe : function () {
this.setState({myData : event.target.value});
}
render : function (){
return (
<div>
<ul>
<li value="Point" onClick={this.clickOnMe}>Point</li>
</ul>
</div>
);
}
...
你得到undefined
因为target.value
仅用于表格元素,如input
。
您可以将函数传递给唯一标识符,然后可以使用该标识符从this.state
获取它的值。
实现可能会有很大差异。最大的问题可能取决于此元素的值是否可以在DOM中更改,或者是否始终保持静态。
以下是我提出的两种解决方案:
如果要更新li
元素的值,可以执行以下操作:
getInitialState: function() {
return {
data: ["point1", "point2", "point3"];
};
}
clickOnMe = (id) => {
console.log(this.state.data[id]);
}
changeData = (id, value) => {
let temp = this.state.data.slice();
temp[id] = value;
this.setState({temp});
}
render = () => {
return (
<div>
<ul>
<li value={this.state.data[0]} onClick={this.clickOnMe.bind(this, 0)}>Point</li>
</ul>
</div>
);
}
this.state.data
是一个在组件构造函数中的数组,包含每个元素的初始值。当您单击某个元素时,您将调用clickOnMe
函数并传入一个参数,该参数对应于当前元素的数据所在的数组中的索引。
如果要稍后更改此值,可以使用值和索引作为参数调用changeData
。制作整个数组的副本,更改所述索引中的值,然后更新state
。
如果li
的值总是静态的,那么你可以这样做:
clickOnMe = (val) => {
this.setState({myData : val});
}
render = () => {
return (
<div>
<ul>
<li onClick={this.clickOnMe.bind(this, "Point")}>Point</li>
</ul>
</div>
);
}
如果你想要的东西是静态的,事情要简单得多。在这里,您可以直接绑定哪个值对应于所述元素,然后在函数中执行您想要的操作。