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

您可以在所需的任何元素上放置“名称”属性，但是只有<form>个“交互式”元素具有DOM API，使您可以将其视为DOM节点上的gettable / settable属性。否则，您必须使用.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}
/>

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

2 个答案: