如何检查我的event.target是否为React中的HTML输入元素的typeof？

Question

请参见此最低示例https://codepen.io/rockmandash/pen/Rzwowd

代码是这样的：

<div class="cool">
  <input type="checkbox" value="checkbox1">
  <input type="checkbox" value="checkbox2">
  <input type="checkbox" value="checkbox3">
</div>

document.querySelector(".cool").addEventListener("click", event => {
  // In React World
  // How do I check if event.target is typeof HTML.input Element?
  console.log(event.target.value);
});

我问这个问题是因为我有成千上万个输入元素，作为回应，我将不得不创建成千上万个回调函数。

因此，我将函数上移到其父级，但是然后我必须验证当前是否单击输入元素。

否则，我可能会设置错误的event.target.value。

Answer 1

g(1)

Answer 2

使用事件类型

handleCheck = (event) => {
  // In React World
  console.log(event.target.type);
}

<div class="cool">
  <input onClick={this.handleCheck} type="checkbox" value="checkbox1" />
  <input onClick={this.handleCheck} type="checkbox" value="checkbox2" />
  <input onClick={this.handleCheck} type="checkbox" value="checkbox3" />
</div>

演示

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<div id="root"></div>

<script type="text/babel">

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      name: 'React'
    };
  }

  handleCheck = (event) => {
    console.log(event.target.type);
  }

  render() {
    return (
      <div>
      <div class="cool">
        <input onClick={this.handleCheck} type="checkbox" value="checkbox1" />
        <input onClick={this.handleCheck} type="checkbox" value="checkbox2" />
        <input onClick={this.handleCheck} type="checkbox" value="checkbox3" />
        
        <input onChange={this.handleCheck} type="text" />
      </div>
      </div>
    );
  }
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
);
</script>

Answer 3

这是事件委托的一个很好的例子。参见How JavaScript Event Delegation Works。

要检查单击的元素的类型，请使用tagName或nodeName。

if (event.target.nodeName === "A")

请注意，您需要使用大写字母：DIV，LI，A，...

注意：在您的特定情况下，您可以像这样检查input元素的类型：event.target.type === "submit"。但是像div，li，a之类的元素没有type属性，因此event.target.type的值对所有元素都是undefined