您得到的
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> );}
如果您希望事物是静态的,那么事情就简单得多。在这里,您可以直接绑定与所述元素对应的值,然后在函数中执行所需的操作。