gpt4 book ai didi

forms - ReactJS 语义 ui - 当值属性存在时无法输入表单

转载 作者:行者123 更新时间:2023-12-02 17:11:08 25 4
gpt4 key购买 nike

我正在按照 ReactJS 教程设置登录表单。使用并导入了语义 ui。电子邮件和密码被传递到表单内的 value 属性中。发生这种情况时,我无法在表格中输入任何内容。一旦删除它,我就可以输入信息,但我认为它不会传递到任何地方。

似乎在其他任何地方都找不到这个问题。以前有人遇到过这个问题吗?

import React from 'react';
import PropTypes from 'prop-types';
import { Form, Button } from 'semantic-ui-react';
import Validator from 'validator';
import InlineError from '../messages/InlineError';



class LoginForm extends React.Component {
state = {
data: {
email: "",
password: ""
},
loading: false,
errors: {}
};

//... is called spread
onChange = e => this.setState({
data: {...this.state.data, [e.target.name]: e.target.value }
});

//() means function takes no params
onSubmit = () => {
const errors = this.validate(this.state.data);
this.setState({errors}); //if there are errors, display them
if(Object.keys(errors).length === 0){
this.props.submit(this.state.data);
}
};

validate = (data) => {
const errors = {};
if(!Validator.isEmail(data.email))
errors.email = "Invalid email";
if(!data.password)
errors.password = "Can't be blank";

return errors;
};

render() {

const { data, errors } = this.state; // import variables into html
return (
<div>
<Form onSubmit={ this.onSubmit }>
<Form.Field error={!!errors.email}>
<label htmlFor="email">Email</label>
<input type="email"
id="email"
placeholder="example@abc.com"
value={ data.email }
onChange={ this.onChange }/>
{errors.email && <InlineError text={errors.email}/>}
</Form.Field>
<Form.Field error={!!errors.email}>
<label htmlFor="password">Password</label>
<input type="password"
id="password"
value={ data.password }
onChange={this.onChange}/>
{errors.password && <InlineError text={errors.password}/>}
</Form.Field>
<Button primary>Login</Button>
</Form>
</div>
);

}
}

LoginForm.propTypes = {
submit: PropTypes.func.isRequired
};



export default LoginForm;

教程:https://www.youtube.com/watch?v=NO2DaxhoWHk&t=879s

最佳答案

onChange = e => this.setState({
data: {...this.state.data, [e.target.name]: e.target.value }
});

此函数将状态设置为共享输入字段名称的变量。因此 e.target.name。但是您的输入字段没有名称属性。

你可以通过以下方式解决这个问题:

import React from 'react';
import PropTypes from 'prop-types';
import { Form, Button } from 'semantic-ui-react';
import Validator from 'validator';
import InlineError from '../messages/InlineError';



class LoginForm extends React.Component {
state = {
data: {
email: "",
password: ""
},
loading: false,
errors: {}
};

//... is called spread
onChange = e => this.setState({
data: {...this.state.data, [e.target.name]: e.target.value }
});

//() means function takes no params
onSubmit = () => {
const errors = this.validate(this.state.data);
this.setState({errors}); //if there are errors, display them
if(Object.keys(errors).length === 0){
this.props.submit(this.state.data);
}
};

validate = (data) => {
const errors = {};
if(!Validator.isEmail(data.email))
errors.email = "Invalid email";
if(!data.password)
errors.password = "Can't be blank";

return errors;
};

render() {

const { data, errors } = this.state; // import variables into html
return (
<div>
<Form onSubmit={ this.onSubmit }>
<Form.Field error={!!errors.email}>
<label htmlFor="email">Email</label>
<input type="email"
id="email"
name="email"
placeholder="example@abc.com"
value={ data.email }
onChange={ this.onChange }/>
{errors.email && <InlineError text={errors.email}/>}
</Form.Field>
<Form.Field error={!!errors.email}>
<label htmlFor="password">Password</label>
<input type="password"
id="password"
name="password"
value={ data.password }
onChange={this.onChange}/>
{errors.password && <InlineError text={errors.password}/>}
</Form.Field>
<Button primary>Login</Button>
</Form>
</div>
);

}
}

LoginForm.propTypes = {
submit: PropTypes.func.isRequired
};



export default LoginForm;

关于forms - ReactJS 语义 ui - 当值属性存在时无法输入表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49207311/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com