Имя цели события не определено, если не вход

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> «интерактивные» элементы имеют API-интерфейсы DOM, которые позволяют рассматривать его как свойство gettable / settable на узле DOM.В противном случае вы должны использовать .getAttribute() и .setAttribute() (что также должно работать для <input> и т. Д.).

Таким образом

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

или, возможно,

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