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

Question

我有这个组件：

...

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的错误吗？如果是这样，有解决方法吗？

谢谢您的帮助。

Answer 1

您可以在所需的任何元素上添加“name”属性，但只有<form>“interactive”元素具有DOM API，允许您将其视为DOM节点上的gettable / settable属性。否则，你必须使用.getAttribute()和.setAttribute()（这也适用于<input>等）。

从而

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

或者可能

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