Javascript 如何在ReactJS中访问JS文件中组件外部的DOM元素

我有一个应用程序，需要访问组件外部用户的输入。我不想将输入也存储在状态中，因此它应该是无状态的。我试着像下面那样传球

<input ref="usrname" input id="userName" ref="user" type="text" class="login-input" placeholder="Enter User ID" 
onChange={(e)=> {GlobalUserModel.setUserName(e.target.value); e.preventDefault();this.obj=GlobalUserModel}}/>

<button class="btn btn-primary btn-login" class="submit" id="submit" name="submit" onClick={ApiCall.bind(GlobalUserModel)} >Login</button>

---

非常感谢您的帮助。提前感谢。

首先，我想让您知道，必须从组件外部访问DOM是一种不好的做法。它可能会产生副作用和合适的bug

---

在您的情况下，您可以传递

onChange

prop，并在

输入

已更改时调用它。这是第一次，我想让您知道，必须从组件外部访问DOM是一种不好的做法。它可能会产生副作用和合适的bug

---

就你而言，您可以传递

onChange

prop并在

input

已更改时调用它

您可以将

ref

传递给从父对象传递给子对象的以访问输入元素您可以将

ref

传递给从父对象传递给子对象的以访问输入元素我想要分离表示和数据层。您能提供一个您提到的方法的示例片段吗？我想将表示层和数据层分开。您能否提供您所提到的方法的示例片段？

class LoginModel {
username;
constructor(){
}
setUserName(username1) {
debugger;
this.username = username1;
console.log("username1 : ",username1)
return this.username;
}

getUserName(){
return this.username;
}
};
const GlobalUserModel=new LoginModel();
export default GlobalUserModel;