如何在ReactJS中的JS文件中訪問組件外的DOM元素

Question

我有一個應用程序，我需要在其中訪問組件外部用戶的輸入。 我也不想將輸入存儲在 state 中，所以它應該是無狀態的。 我試着像下面這樣通過。

<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更改時調用它