如何从中获取价值 * 标签

小编典典

如何从中获取价值 * 标签

reactjs

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

阅读 288

2020-07-22

共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>
 );
}

如果您希望事物是静态的，那么事情就简单得多。在这里，您可以直接绑定与所述元素对应的值，然后在函数中执行所需的操作。

2020-07-22