为什么event.target.value被截断？

Question

我将一些数据设置在HTML元素中作为值。但是当我使用e.target.value获取值时，它会截断值。

  <li value="74fd5135-e756-41af-a0f7-6eaf20bc2551" OnClick= 
  {this.SelectedItem}>Something </li>

  SelectedItem =(e)=>
  {
   e.target.value ;   //its gives me 74
  }

它应该返回我设置的相同数据，即

74fd5135-e756-41af-a0f7-6eaf20bc2551

- adeel ahmad

---

value：这个整数属性表示列表项的当前序号值，由 <ol> 元素定义。即使使用罗马数字或字母显示列表，这个属性的唯一允许值也是一个数字。 - Andreas

不同于input值 - Hacketo

请使用 data-value 替代 value，因为您明显不希望该内容具有 value 属性的预期效果。 - Pointy

Answer 1

列表项的value属性只能包含数字。

value

这个整数属性表示由<ol>元素定义的当前序号值。 该属性允许的唯一值是数字，即使使用罗马数字或字母显示列表也是如此。跟随此项的列表项将从设置的值继续编号。 对于无序列表(<ul>)或菜单(<menu>)，value属性没有意义。

来源: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li

value属性的定义：

[Exposed=Window, HTMLConstructor]
interface HTMLLIElement : HTMLElement {
  [CEReactions] attribute long value;
};

来源：https://html.spec.whatwg.org/multipage/dom.html#concept-element-dom

- Andreas

Answer 2

你可以像这样传递参数。

 //option 1
 <li OnClick={()=>this.SelectedItem("74fd5135-e756-41af-a0f7-6eaf20bc2551")}>Something </li>

 //option 2
 <li OnClick={this.SelectedItem.bind(this,"74fd5135-e756-41af-a0f7-6eaf20bc2551"}>Something </li>

  SelectedItem =(value)=>
  {
    console.log(value);
  }

- sathish kumar