web-dev-qa-db-ja.com

マテリアルUIテキストフィールドからパスワードを表示する方法は？

私のコードは適切に動作し、パスワードフィールドに書き込むと、テキストが非表示になります。ユーザーが希望する場合にパスワードを表示するオプションがある機能を追加する方法はありますか？

  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  return (
          <div>
         <div className='main-content'>
         <form className="form" noValidate autoComplete="off">
                {[{ label: "Email", state: email , type: "text", function: setEmail},
                { label: "Password", state: password , type: "password", function: setPassword},
                  ].map((item, index) => (
                  <div>
                    <TextField
                      id="outlined-basic"
                      key={index}
                      label={item.label}
                      variant="outlined"
                      type= {item.type}
                      onChange= {e => item.function(e.target.value)}        
                    />
                    <br></br><br></br>
                  </div>
                )
                )}
         </form>
         </div>
       </div>
        );
      }
javascripthtmlreactjstypescriptmaterial-ui
3
x89

パスワードフィールドの横に「表示」ボタンを追加して、入力のタイプをtype=passwordからtype=textに変更することを選択できます。

1
Arpitha Chandrashekara

まあ、私はこのようなものを推測します。複数のパスワードフィールドではうまく機能しません。

const [showPassword, setShowPassword] = useState(false);

const handleClick = () => {
  setShowPassword(prev => !prev);
}

return (
  <form className="form" noValidate autoComplete="off">
    {[
      { 
        label: "Email",
        state: email,
        type: "text",
        function: setEmail
      },
      {
        label: "Password", 
        state: password, 
        type: "password", 
        function: setPassword,
      },
     ].map((item, index) => (
       <div>
         <TextField
           InputProps={{
             endAdornment: item.type ? 'password' (
               <InputAdornment position="end">
                  <IconButton
                    onClick={handleClick}
                    Edge="end"
                  >
                    {showPassword ? <Visibility /> : <VisibilityOff />}
                  </IconButton>
                </InputAdornment>
             ) : null
           }}
           id="outlined-basic"
           key={index}
           label={item.label}
           variant="outlined"
           type={showPassword ? 'text' : item.type}
           onChange= {e => item.function(e.target.value)}        
         />
         <br></br><br></br>
       </div>
      ))
    }
</form>
1
Ioannis Potouridis

"show-pwd" btnクリックに関数を追加します。以下のタスクを実行します。

  1. パスワードフィールドの現在の値を取得します。
  2. パスワードフィールドのタイプを「password」から「text」に設定します
  3. パスワードフィールドの値を、取得した値に設定します（これは必要な場合と必要でない場合があります）。
0
Ashutosh