React Bootstrap hide/show 眼睛图标

Question

我有这样的密码字段。我想在 show/hide 密码的密码字段末尾放一个眼睛图标。

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

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

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 的头块中添加 font-awesome 的 cdn link。