Question

我是React的新手。因此，例如，当我创建一个新的React应用时，该组件会呈现一些按钮，例如

//index.html

<button class="m-2 btn btn-block btn-secondary">Creat</button>
<button class="m-2 btn btn-block btn-secondary">Save</button>
<button class="m-2 btn btn-block btn-secondary">Delete</button>

我知道幕后有一个bundle.js，但是对于所有按钮html标签，没有“ id”属性来区分每个按钮，所以当我单击“保存”按钮时，bundle.js会如何知道我点击了哪个按钮？

Answer 1

有一个隐藏的事件侦听器，已注册到DOM元素。如果您使用Chrome开发工具，则可以检查按钮元素，然后在Event Listeners标签中将看到有一部分代码可以监听那些点击事件。

有一个addEventListener方法可以将事件侦听器添加到DOM元素。 https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

最初，HTML主体为空，当React通过JavaScript创建元素时，它具有对这些元素的引用，因此可以在这些元素上调用addEventListener。

这是一个示例，说明React内部如何工作。

var b1 = document.createElement("button");
var b1text = document.createTextNode("Create");
b1.appendChild(b1text);
b1.addEventListener("click", function() {
	alert("Create");
});

var b2 = document.createElement("button");
var b2text = document.createTextNode("Delete");
b2.appendChild(b2text);
b2.addEventListener("click", function() {
	alert("Delete");
});


var element = document.getElementById("root");
element.appendChild(b1);
element.appendChild(b2);

<div id="root">
</div>

React内部没有id即可引用DOM对象，因此可以通过引用添加事件侦听器。

您在.jsx中以HTML编写的代码实际上并未用作纯HTML，而是被编译为JavaScript。您可以在https://babeljs.io/repl/处尝试将React JSX转换为React JS（位于Bundle.js中）。

这就是React看到您的HTML代码的方式

React.createElement("div", null, React.createElement("button", {
  className: "m-2 btn btn-block btn-secondary"
}, "Creat"), React.createElement("button", {
  className: "m-2 btn btn-block btn-secondary"
}, "Save"), React.createElement("button", {
  className: "m-2 btn btn-block btn-secondary"
}, "Delete"));

其他信息可以在这里https://reactjs.org/docs/jsx-in-depth.html

Answer 2

React使用虚拟DOM，您所做的代码更改，更改的不是真正的虚拟DOM。当发生诸如onclick之类的事件或用户在输入中键入内容时，React会比较真实DOM和虚拟DOM的状态，如果它们相同，则什么也不会发生，如果它们不同，则React将更新真实DOM以匹配虚拟DOM。

将onclick侦听器添加到您的按钮，并将参数传递给onclick函数，如下所示。

onButtonClick = (btn) => {
  console.log(btn)
}

<button onClick={() => this.onButtonClick('create')} class="m-2 btn btn-block btn-secondary">Creat</button>

<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 = {
      result: '',
      isLoading: false
    };
  }
  
  
  
  onButtonClick = (btn) => {
  console.log(btn)
  }
  

  

  render() {

    return (
      <div>
      <button onClick={() => this.onButtonClick('create')} class="m-2 btn btn-block btn-secondary">Creat</button>
      <button onClick={() => this.onButtonClick('save')} class="m-2 btn btn-block btn-secondary">Save</button>
      <button onClick={() => this.onButtonClick('delete')} class="m-2 btn btn-block btn-secondary">Delete</button>
      </div>
    );
  }
}

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

或在按钮上添加ID

onButtonClick = (event) => {
    console.log(event.target.id) // get the id of the clicked button
}

<button id="1" onClick={this.onButtonClick} class="m-2 btn btn-block btn-secondary">Creat</button>

<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 = {
      result: '',
      isLoading: false
    };
  }
  
  
  
  onButtonClick = (event) => {
    console.log(event.target.id)
  }
  

  

  render() {

    return (
      <div>
      <button id="1" onClick={this.onButtonClick} class="m-2 btn btn-block btn-secondary">Creat</button>
      <button id="2" onClick={this.onButtonClick} class="m-2 btn btn-block btn-secondary">Save</button>
      <button id="3" onClick={this.onButtonClick} class="m-2 btn btn-block btn-secondary">Delete</button>
      </div>
    );
  }
}

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

Answer 3

每个按钮都需要使用onClick或onSubmit（如果是表单形式）连接到某种动作。这是一个警报框的示例，如果查看者按“确定”，则该警报框会触发变异函数以删除某项...

  <button class="m-2 btn btn-block btn-secondary" onClick={e => {
    if (window.confirm("Are you sure you wish to delete this?"))
      onSubmit(e, removeTagFromDeck);
     }}>Delete</button>

如果您需要id来进一步优化CSS，则只需在按钮中添加id =“ whatever”。

js如何知道单击了哪个按钮？

3 个答案: