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

Question

我是 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>
 );
}
...

Answer 1

您收到的是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>
 );
}

如果您希望事情是静态的，事情就简单多了。在这里你可以直接绑定那个元素对应的值，然后在函数中做你想做的事。