AntDesign 表单中的自定义输入字段 - “一个组件正在更改一个不受控制的输入以进行控制。”

Question

所以我喜欢使用 AntDesign 的 forms 因为我喜欢他们的验证方式。 但是，我想更改Input组件，使其对我的网站更加个性化。 所以我制作了我的CustomInput组件并将其替换为他们的Input组件。 一切正常。 我的价值观被他们的onFinish function 和一切所吸引。 但是我不知道为什么控制台生我的气并一直告诉我有一个不受控制的输入组件。

A component is changing an uncontrolled input to be controlled. 
This is likely caused by the value changing from undefined to a defined value, which should not happen. 
Decide between using a controlled or uncontrolled input element for the lifetime of the component.

我很想忽略它，因为它的工作方式实际上没有任何问题。

继承人的代码：

const CustomInput = styled.input`
    background-color: #f5f5f5;
    border: 0.2px solid #d1d1d1;
    border-radius: 4px;
    padding: 8px 18px;
    width: 290px;
    font-family: "Mulish", sans-serif;
    font-weight: 300;
    font-size: 13pt;
    outline: none;
    transition: 0.3s ease-in-out;

    &:hover {
        background-color: #f2f2f2;
    }

    &::placeholder {
        color: #ababab;
        font-weight: 200;
    }
`;

const CustomeBtn = styled.button`
    background-color: #293651;
    color: #f7f5fb;
    padding: 8px 20px;
    outline: none;
    border: none;
    border-radius: 20px;
    font-family: "Mulish", sans-serif;
    font-size: 13pt;
    font-weight: 300;
    margin-right: 10px;
    transition: 0.3s ease-in-out;

    &:hover {
        background-color: #ffbb33;
        color: black;
    }
`;

const CustomLink = styled(Link)`
    font-family: "Mulish", sans-serif;
    font-size: 12pt;
    font-weight: 400;
    color: #293651;
    text-align: center;

    &:hover {
        color: #ffbb33;
    }
`;

function Login() {
    const onFinish = (values) => {
        console.log("Received values of form: ", values);
    };

    return (
        <MainContainer>
            <Heading>Login</Heading>
            <LoginIcon />
            <Form
                name="normal_login"
                className="login-form"
                initialValues={{
                    remember: true,
                }}
                onFinish={onFinish}
            >
                <Form.Item
                    name="username"
                    rules={[
                        {
                            required: true,
                            message: "Please input your Username!",
                        },
                    ]}
                >
                    ---------My custom input-----------
                    <CustomInput placeholder="Username" autoComplete='on'/>
                </Form.Item>
                <Form.Item
                    name="password"
                    rules={[
                        {
                            required: true,
                            message: "Please input your Password!",
                        },
                    ]}
                >
                    -----------My custom input-------------
                    <CustomInput type="password" placeholder="Password" autoComplete='on' />
                </Form.Item>

                <Form.Item>
                    <CustomeBtn htmlType="submit">Login</CustomeBtn>
                    Or <CustomLink to="/register">register now!</CustomLink>
                </Form.Item>
            </Form>
        </MainContainer>

奇怪的是，当我向我的输入字段添加一个value属性时，它没有拾取它。 就像我添加value='this'一样，它不会显示出来，它会让我正常输入字段，所以....发生了什么

Answer 1

问题是您的输入在Form上的initialValue或Form.Item上的initialValues中没有提供初始值。 因此，当您第一次输入一个值时，它会从未undefined变为其他值，将其从不受控制的输入切换为受控输入。

React 认为这是一个潜在的错误，因为输入应该受到控制（始终提供undefined以外的值）或从不给出任何值（在这种情况下，值由输入元素本身管理）。 它们在安装时不应从一个更改为另一个。

在initialValues或initialValue中提供初始值：

<Form
    name="normal_login"
    className="login-form"
    initialValues={{
        remember: true,
        Username: '',
        password: '',
    }}
    onFinish={onFinish}
>

或者

<Form.Item name="username" initialValue="">{/* ... */}</Form.Item>

您还可以使用来自antd的Input组件，如果没有提供，它还会根据类型在基础输入元素上设置一个合理的初始值。