如果不是输入，则事件目标的名称未定义答案

【问题标题】：Event target's name is undefined if not an input如果不是输入，则事件目标的名称未定义
【发布时间】：2019-02-18 03:30:10
【问题描述】：

我有这个组件：

...

onInputChange = evt => {
  const target = evt.target;
  let value = null;
  if (target.nodeName === "INPUT")
    value = target.value; //works well
  else if (target.nodeName === "SPAN")
    value = target.innerText; //works well
  const name = target.name; //works well if it's the input, doesn't if it's the span
  this.setState({[name]: value});
}

render() {
  ...
  <input name="myFirstValue" onChange={onInputChange} />
  <span name="mySecondValue" contentEditable="true" onInput={onInputChange}></span>
  ...
}

...

当触发事件的是input 时，它运行良好。但问题是当它是 span 时：target.name 返回 undefined 而不是 'mySecondValue'。

这是来自 React 的错误吗？如果是这样，是否有解决方法？

感谢您的帮助。

【问题讨论】：

标签： javascript reactjs contenteditable

【解决方案1】：

你可以在任何你想要的元素上添加一个“name”属性，但是只有<form>“interactive”元素有 DOM API，允许你把它当作 DOM 节点上的 gettable/settable 属性。否则，您必须使用.getAttribute() 和.setAttribute()（这也适用于<input> 等）。

这样

const name = target.getAttribute("name");

或许

const name = target.name || target.getAttribute("name");

【讨论】：

【解决方案2】：

event.target.name 在任何具有 name 属性的元素上触发事件时起作用。

<input
type="text"
id="nume"
**name="lastName"**
class="form-control"
placeholder="Nume"
required
autoFocus
defaultValue={employeeData.lastName || ""}
onChange={handleChange}
/>

【讨论】：