reactjs - React Bootstrap 隐藏/显示眼睛图标

Question

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

  <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 引导程序中找不到这个。通过以下方式，可以通过在末尾添加一个按钮来解决问题。

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

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

Answer 1

您可以在 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 链接。