ReactJS如何处理这个涉及DOM的问题

在vanilla js中，如果我们想向dom添加一个侦听器，我们可以这样做

<div onclick="myFunction(this)">...</div>

。。。

---

但我在react组件中做的，这是指组件类本身。如何处理这样的事情？

您应该在函数中传递

事件

，然后使用

e.target

访问DOM元素

例如，如果要处理输入更改，可以执行以下操作：

const [values, setValues] = useState({
  username: '',
});

const handleChange = event => {
  event.persist();
  setValues(values => ({
      ...values,
      [event.target.id]: event.target.value 
  }));
};

event.target.id

是DOM元素的id，

event.target.value

是同一元素的值，在本例中为

input

<input
  id="username"
  type="text"
  placeholder="Enter username"
  onChange={handleChange}
  value={values.username}
  required
></input>

也

注意：

如果希望以异步方式访问事件属性，则应该对事件调用event.persist（），这将从池中删除合成事件，并允许用户代码保留对事件的引用

---

在react中，你应该使用

onClick

（大写C），并将事件传递给你的函数

<div onClick={(e) => {myfunction(e)}}>...</div>

---

在您的上下文中，

此

引用DOM目标元素，因此您可以将函数定义为：

function myFunction(target) { /* Code here */ }

但在react中，定义输入时：

<input onClick={myFunction} />

---

请问您为什么想要一个指向Dom的

this

？此外，您还应该查找

ref

道具对组件的作用，听起来这可能就是您要查找的。在dom事件中，react

this==e.target

中的相同操作，因为我不想在方法中执行document.getElementById，因此，我宁愿将dom本身作为参数，请为

setValues

添加有关

useState

的信息，或者用

this.setState

更改它。OP可能会混淆。：）

<input onClick={myFunction} />

function myFunction(event) { console.log(event.target) }