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

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 returns undefined 而不是 'mySecondValue'.

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

感谢您的帮助。

Answer 1

您可以将 "name" 属性放在您想要的任何元素上，但只有 <form> "interactive" 元素具有 DOM API，允许您将其视为 gettable/settable 属性在 DOM 节点上。否则，您必须使用 .getAttribute() 和 .setAttribute()（它们也适用于 <input> 等）。

因此

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

或者也许

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

Answer 2

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

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

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

Event target's name is undefined if not an input

javascript

contenteditable

reactjs