[英]Submitting form returns proxy object instead of form data in Reactjs
我在Reactjs中使用语义UI创建登录表单。 请在下面找到代码:
登录表单本身:
import React from 'react';
import { Form, Button } from 'semantic-ui-react';
const LoginPage = ({ email, password, handleChange, handleSubmit, errors }) => (
<Form onSubmit={handleSubmit}>
<Form.Field>
<label htmlFor="email">Email:</label>
<input
type="email"
name="email"
id="email"
placeholder="example@example.com"
value={email}
onChange={(e) => handleChange(e)}
/>
</Form.Field>
<Form.Field>
<label htmlFor="password">Password:</label>
<input
type="password"
name="password"
id="password"
value={password}
onChange={(e) => handleChange(e)}
/>
</Form.Field>
<Button primary> Login </Button>
</Form>
);
export default LoginPage;
登录容器(父组件)如下:
import React, { Component } from 'react';
import { LoginPage } from '../components';
import Validator from 'validator';
class Login extends Component {
constructor(props) {
super(props)
this.state = {
data: {
email: '',
password: ''
},
loading: false,
errors: {}
}
}
handleChange = (e) => {
this.setState({
data: { ...this.state.data, [e.target.name]: e.target.value }
});
}
handleSubmit = (values) => {
console.log(values);
const errors = this.validate(this.state.data);
this.setState({
errors: errors
})
}
validate = (data) => {
const errors = {};
if (!Validator.isEmail(data.email)) errors.email = "Invalid Email";
if (!data.password) errors.password = "Password cannot be blank";
return errors;
}
render() {
return (
<LoginPage
email={this.state.data.email}
password={this.state.data.password}
handleChange={this.handleChange}
handleSubmit={this.handleSubmit}
errors={this.state.errors}
/>
)
}
}
export default Login;
当我尝试在父组件的handleSubmit函数中控制台日志值时,它总是返回代理对象,而不是表单值或表单数据。
Proxy {dispatchConfig: {…}, _targetInst: ReactDOMComponent, isDefaultPrevented: ƒ, isPropagationStopped: ƒ, _dispatchListeners: ƒ, …}
谁能让我知道我要去哪里错了?
谢谢
“代理”对象似乎是一个Event
对象。 确实, 语义UI文档说
我们处理数据就像原始React一样。 有关更多信息,请参见React的受控组件文档。
这是它引用的香草反应示例 :
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}
因此,使用此库,您有责任从您的州/存储区检索表单数据,但不会自动将其传递给onSubmit
。
handleSubmit = (e) => {
console.log(e);
const errors = this.validate(this.state.data);
this.setState({
errors: errors
})
}
因此,实际上它是正确的,因为您没有在任何地方使用此参数e
/ values
。 您只是对日志和变量名感到困惑。 您可以简单地忽略它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.