React Bootstrap 隐藏/显示眼睛图标

问题描述

我有这样的密码字段。我想在密码字段的末尾放一个眼睛图标来显示/隐藏密码。

  <Form.Control
                    size="lg"
                    type="password"
                    placeholder="Password"
                    style={loginStyle.regualrText}
                    className="mt-3"
                    onChange={e => {
                        const val = e.target.value;
                        setLoginData(prevstate => {
                            return { ...prevstate,password: val }
                        });
                    }}
                />

我在 React bootstrap 中找不到这个。如下方式，在末尾添加按钮即可解决问题。

      <InputGroup className='mt-3'>
                    <FormControl
                        id={'Password'}
                        size="lg"
                        type={passwordState.type}
                        placeholder="Password"
                        style={loginStyle.regualrText}
                        className="pass-wrapper"
                        onChange={e => {
                            const val = e.target.value;
                            setLoginData(setState => {
                                return {...setState,password: val}
                            });
                        }}
                    />
                    <InputGroup.Append>
                        <button class="btn btn-outline-danger" type="button"
                                onClick={() => setPasswordState(setState => {
                                    return {
                                        ...setState,type: 'password' ? 'text' : 'password',name: 'Show' ? 'Hide' : 'Show'
                                    }
                                })}>{passwordState.name}
                        </button>
                    </InputGroup.Append>
                </InputGroup>

有什么办法可以通过添加眼睛图标来修复它吗？

解决方法

可以在InputGroup.Append下添加InputGroup.Text

<InputGroup.Append>
    <InputGroup.Text>
        <i onClick={clickHandler} class={showPass ? 'fas fa-eye-slash' : 'fas fa-eye'}></i>
    </InputGroup.Text>
</InputGroup.Append>

你必须在html的head块中添加font-awesome的cdn链接。