Forms ReactJS语义ui-当值属性存在时，无法键入表单_Forms_Reactjs_Semantic Ui

Forms ReactJS语义ui-当值属性存在时，无法键入表单

forms reactjs

Forms ReactJS语义ui-当值属性存在时，无法键入表单,forms,reactjs,semantic-ui,Forms,Reactjs,Semantic Ui,我正在按照ReactJS教程设置登录表单。使用并导入语义用户界面。电子邮件和密码被传递到表单中的值属性中。发生这种情况时，我无法在表单中键入任何内容。一旦我删除它，我就可以输入信息，但我认为它不会被传递到任何地方似乎无法在其他任何地方找到此问题。以前有人遇到过这个问题吗 import React from 'react'; import PropTypes from 'prop-types'; import { Form, Button } from 'semantic-ui-react';

我正在按照ReactJS教程设置登录表单。使用并导入语义用户界面。电子邮件和密码被传递到表单中的

值

属性中。发生这种情况时，我无法在表单中键入任何内容。一旦我删除它，我就可以输入信息，但我认为它不会被传递到任何地方

似乎无法在其他任何地方找到此问题。以前有人遇到过这个问题吗

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;

从“React”导入React；
从“道具类型”导入道具类型；
从“语义ui反应”导入{Form，Button}；
从“验证器”导入验证器；
从“../messages/InlineError”导入InlineError；
类LoginForm扩展了React.Component{
状态={
数据：{
电邮：“，
密码：“
},
加载：false，
错误：{}
};
//…被称为传播
onChange=e=>this.setState({
数据：{…this.state.data[e.target.name]：e.target.value}
});
//（）表示函数不带参数
onSubmit=（）=>{
const errors=this.validate（this.state.data）；
this.setState（{errors}）；//如果有错误，显示它们
if（Object.keys（errors）.length==0）{
this.props.submit（this.state.data）；
}
};
验证=（数据）=>{
常量错误={}；
如果（！Validator.isEmail（data.email））
errors.email=“无效电子邮件”；
如果（！data.password）
errors.password=“不能为空”；
返回错误；
};
render（）{
const{data，errors}=this.state；//将变量导入html
返回(
电子邮件
{errors.email&&}
密码
{errors.password&&}
登录
);
}
}
LoginForm.propTypes={
提交：需要PropTypes.func.isRequired
};
导出默认登录信息；

教程：

此函数用于将状态设置为共享输入字段名称的变量。因此

e.target.name

。但是您的输入字段没有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;

从“React”导入React；
从“道具类型”导入道具类型；
从“语义ui反应”导入{Form，Button}；
从“验证器”导入验证器；
从“../messages/InlineError”导入InlineError；
类LoginForm扩展了React.Component{
状态={
数据：{
电邮：“，
密码：“
},
加载：false，
错误：{}
};
//…被称为传播
onChange=e=>this.setState({
数据：{…this.state.data[e.target.name]：e.target.value}
});
//（）表示函数不带参数
onSubmit=（）=>{
const errors=this.validate（this.state.data）；
this.setState（{errors}）；//如果有错误，显示它们
if（Object.keys（errors）.length==0）{
this.props.submit（this.state.data）；
}
};
验证=（数据）=>{
常量错误={}；
如果（！Validator.isEmail（data.email））
errors.email=“无效电子邮件”；
如果（！data.password）
errors.password=“不能为空”；
返回错误；
};
render（）{
const{data，errors}=this.state；//将变量导入html
返回(
电子邮件
{errors.email&&}
密码
{errors.password&&}
登录
);
}
}
LoginForm.propTypes={
提交：需要PropTypes.func.isRequired
};
导出默认登录信息；

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;