提问人:Saif eldeen Adel 提问时间:1/31/2021 更新时间:1/31/2021 访问量:353
组件正在更改要控制的不受控制的输入。这可能是由于值从未定义更改为已定义值所致
A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value
问:
所以我使用 Ant 设计进行表单和验证。但是我使用了我自己的输入字段,而不是他们的 .但现在我不断收到这个警告。即使我已经设置了他们的状态并且没有将他们的值设置为未定义。然后,我还有将不断设置其新状态的处理程序。那么这到底是怎么回事??FormInput
Input
const FormInput = styled.input`
width: 280px;
padding: 10px 18px;
background-color: #E5EBDF;
color: #545454;
font-size: 12pt;
border-radius: 10px;
outline: none;
border:none;
&::placeholder {
color: #B0B0B0;
}
&:hover {
background-color: #E0E6DA
}
`
const FormButton = styled.button `
outline: none;
border: none;
padding: 10px 15px;
border-radius: 20px;
background-color: #f06e6c;
color: #FAFFEB;
margin-top: 5px;
&:hover {
background-color: #FF8987
}
`
function Login({history, isAuthenticated, error, login}) {
// State variables to make input fields controlled components
const [username, setUsername] = useState("")
const [password, setPassword] = useState("")
const onFinish = (values) => {
console.log('Received values of form: ', values.username, values.password);
};
// Fucntions for setting state
const handleUsername = (event) => {
setUsername(event.target.value)
}
const handlePassword = (event) => {
setPassword(event.target.value)
}
return (
<LoginForm>
<Header>Login!</Header>
<Form
name="normal_login"
className="login-form"
initialValues={{
remember: true,
}}
onFinish={onFinish}
size='large'>
<Form.Item
name="username"
rules={[
{
required: true,
message: 'Please input your Username!',
},
]}
// style={{marginBottom: 10}}
>
<FormInput placeholder="Username" value={username} onChange={handleUsername} autoComplete="on"/>
</Form.Item>
<Form.Item
name="password"
rules={[
{
required: true,
message: 'Please input your Password!',
},
{ min: 5, message: 'Minimum 5 characters.' },
]}
>
<FormInput placeholder="Password" type="password" value={password} onChange={handlePassword} autoComplete="on"/>
</Form.Item>
<div>
{
error &&
<Error>Login unsuccessful, <br></br> check username and password</Error>
}
</div>
<Form.Item style={{textAlign: 'center'}}>
<FormButton htmltype="submit"> Log in </FormButton> Or <FormLink><Link to="/register" className="linkStyle">register now!</Link></FormLink>
</Form.Item>
</Form>
</LoginForm>
)
}
答: 暂无答案
评论
login(values.username, values.password)