import React from "react";
import MailIcon from "@material-ui/icons/Mail";
export default function App() {
return (
<div className="App">
Pass: <input type="password" id="pass"/>
<MailIcon onClick={showPass("pass")}/>
</div>
);
function showPass(e)
{
console.log(e);
var pass = document.getElementById(e);
console.log(pass);
if(pass.type === "password")
{
pass.type="text";
}
else
{
pass.type ="password";
}
}
}
我正在呼叫一個簡單的函式來將欄位的型別更改為文本，但我不知道為什么它會向我顯示此錯誤
錯誤頁面
控制臺日志
當我控制臺記錄 e 時，它??顯示“pass”名稱，但是當我傳遞給 getElementById 時，它會轉換為 null。
uj5u.com熱心網友回復：
您需要開始在 React 中思考，而不是使用原生 DOM 方法，并使用 state。然后，您可以單擊該圖示以呼叫一個函式來更新type狀態（最初設定為“密碼”），該狀態將反映在新渲染中。
const { useState } = React;
function Example() {
// Initialise the state
const [type, setType] = useState('password');
// Set the new state when the main icon is clicked
function changeType() {
const newType = type === 'password' ? 'text' : 'password';
setType(newType);
}
// Capitalise the label
function capitalise(str) {
return `${str[0].toUpperCase()}${str.substr(1, str.length)}`;
}
return (
<div>
{capitalise(type)}: <input type={type} />
<button onClick={changeType}>Mail icon</button>
</div>
);
}
ReactDOM.render(
<Example />,
document.getElementById('react')
);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>uj5u.com熱心網友回復：
更改onClick={showPass("pass")}為onClick={()=>showPass("pass")}
uj5u.com熱心網友回復：
您的代碼有多個錯誤：
1-不要在反應中使用getElementById。
2-您必須使用 from e.target而不是e來參考元素。
1,2 => var pass = e.target; .
3-即便如此，在您的 If 中，pass.type為 null！因為MailIcon沒有type屬性。（輸入標簽有 type 屬性）
uj5u.com熱心網友回復：
你只需要實作這樣的功能：
onClick={() => showPass("pass")}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/395275.html
標籤：javascript html 反应 dom ecmascript-6