如何从<li>标签获取价值

时间:2016-04-20 08:13:57

标签: javascript reactjs dom

我是React.js的初学者,需要一些帮助。 我想在点击它时从<li> - 标记中获取值或数据。我怎样才能做到这一点?

...
clickOnMe : function () {
   this.setState({myData : event.target.value});
}

render : function (){
   return (
   <div>
     <ul>
        <li value="Point" onClick={this.clickOnMe}>Point</li>
     </ul>
   </div>
 );
}
...

1 个答案:

答案 0 :(得分:2)

您获得undefined因为target.value仅用于input等表单元素。

您可以将该功能传递给唯一标识符,然后您可以使用该标识符从this.state获取其值。

实施可能会有很大差异。最大的问题可能取决于此元素的值是否可以在DOM中更改,或者是否始终保持静态。

以下是我为两者提出的解决方案:

元素可以更改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

元素在DOM中是静态的:

如果li的值始终是静态的,那么您可以执行以下操作:

clickOnMe = (val) => {
   this.setState({myData : val});
}

render = () => {
   return (
   <div>
     <ul>
        <li onClick={this.clickOnMe.bind(this, "Point")}>Point</li>
     </ul>
   </div>
 );
}

如果你想要的东西是静态的,事情要简单得多。在这里,您可以直接绑定哪个值对应于所述元素,然后在函数中执行您想要的操作。