Question

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

<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>

在LoginModel.js中

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;

我们将不胜感激。谢谢。

Answer 1

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

根据您的情况，您可以传递onChange属性，并在input更改后调用它。

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

1 个答案: