React Form:使用时,Form Input需要一个name属性

时间:2018-10-15 08:44:06

标签: javascript reactjs formsy-react

我已经使用formsy-react-2创建了一个表单,但是它不起作用。我正在

  

错误:表单输入在使用时需要一个name属性

我是React JS的新手,我不知道在React JS中使用表单时哪个包是最好的。请给我一些建议。

这是React JS中我的表单类的源代码。我正在使用React版本'16 .5.2'

import React from 'react';

import Formsy from 'formsy-react-2';

class MyInput extends Formsy.Mixin {
    static defaultProps = {
        type: 'text'
    }

    updateValue = (event) => {
        this.setValue(event.target.value);
    }

    render() {
        const {type, ...rest} = this.removeFormsyProps(this.props);
        const errorMessage = this.getErrorMessage();
        return (
            <div>
                <input {...rest} type={type} value={this.getValue()} onChange={this.updateValue}/>
                <span>{errorMessage}</span>
            </div>
        )
    }
}

class MyInputHOC extends React.Component {
    updateValue = (event) => {
        this.props.setValue(event.target.value);
    }

    render() {
        const errorMessage = this.getErrorMessage();
        return (
            <div>
                <input type='text' value={this.props.getValue()} onChange={this.updateValue}/>
                <span>{errorMessage}</span>
            </div>
        )
    }
}

export default  Formsy.HOC(MyInputHOC);

// Using your new component

class MyForm extends React.Component {
    state = {
        formIsValid: false
    }

    enableSubmit() {
        this.setState({formIsValid: true});
    }

    disableSubmit() {
        this.setState({formIsValid: false});
    }

    submit(model) {
        console.log(model);
        // model = {
        //   foo: 'foo@foo.com',
        //   bar: 10
        // }
    }

    // This code results in a form with a submit button that will run the `submit`
    // method when the submit button is clicked with a valid email. The submit button
    // is disabled as long as
    // - the foo input is empty or the value is not an email; and
    // - the bar input is not an integer.
    // On validation error it will show the error message.

    render() {
    return(
            <Formsy.Form onValidSubmit={this.submit} onValid={this.enableSubmit} onInvalid={this.disableSubmit}>
                <MyInput name='foo' validations='isEmail' validationError='This is not a valid email' required/>
                <MyInputHOC name='bar' validations='isInt' validationError='This is not an integer' />
                <button type="submit" disabled={!this.state.formIsValid}>Submit</button>
            </Formsy.Form>
    )

    }
}

1 个答案:

答案 0 :(得分:1)

您还需要在name组件中使用/指定MyInputHOC属性。

MyInput中,组件name的属性是通过{...rest}传递的。

import React from 'react';

import Formsy from 'formsy-react-2';

class MyInput extends Formsy.Mixin {
    static defaultProps = {
        type: 'text'
    }

    updateValue = (event) => {
        this.setValue(event.target.value);
    }

    render() {
        const {type, ...rest} = this.removeFormsyProps(this.props);
        const errorMessage = this.getErrorMessage();
        return (
            <div>
                <input {...rest} type={type} value={this.getValue()} onChange={this.updateValue}/>
                <span>{errorMessage}</span>
            </div>
        )
    }
}

class MyInputHOC extends React.Component {
    updateValue = (event) => {
        this.props.setValue(event.target.value);
    }

    render() {
        const errorMessage = this.getErrorMessage();
        return (
            <div>
                <input name={this.props.name} type='text' value={this.props.getValue()} onChange={this.updateValue}/>
                <span>{errorMessage}</span>
            </div>
        )
    }
}

export default  Formsy.HOC(MyInputHOC);

// Using your new component

class MyForm extends React.Component {
    state = {
        formIsValid: false
    }

    enableSubmit() {
        this.setState({formIsValid: true});
    }

    disableSubmit() {
        this.setState({formIsValid: false});
    }

    submit(model) {
        console.log(model);
        // model = {
        //   foo: 'foo@foo.com',
        //   bar: 10
        // }
    }

    // This code results in a form with a submit button that will run the `submit`
    // method when the submit button is clicked with a valid email. The submit button
    // is disabled as long as
    // - the foo input is empty or the value is not an email; and
    // - the bar input is not an integer.
    // On validation error it will show the error message.

    render() {
    return(
            <Formsy.Form onValidSubmit={this.submit} onValid={this.enableSubmit} onInvalid={this.disableSubmit}>
                <MyInput name='foo' validations='isEmail' validationError='This is not a valid email' required/>
                <MyInputHOC name='bar' validations='isInt' validationError='This is not an integer' />
                <button type="submit" disabled={!this.state.formIsValid}>Submit</button>
            </Formsy.Form>
    )

    }
}

更新

为了使事情更清楚,您共享的代码是使用Formsy的不同方式。

MyInput.js

import React from 'react';

import Formsy from 'formsy-react-2';

export default class MyInput extends Formsy.Mixin {
    static defaultProps = {
        type: 'text'
    }

    updateValue = (event) => {
        this.setValue(event.target.value);
    }

    render() {
        const {type, ...rest} = this.removeFormsyProps(this.props);
        const errorMessage = this.getErrorMessage();
        return (
            <div>
                <input {...rest} type={type} value={this.getValue()} onChange={this.updateValue}/>
                <span>{errorMessage}</span>
            </div>
        )
    }
}

MyInputHOC.js

import React from 'react';
import Formsy from 'formsy-react-2';

class MyInputHOC extends React.Component {
    updateValue = (event) => {
        this.props.setValue(event.target.value);
    }

    render() {
        const errorMessage = this.getErrorMessage();
        return (
            <div>
                <input name={this.props.name} type='text' value={this.props.getValue()} onChange={this.updateValue}/>
                <span>{errorMessage}</span>
            </div>
        )
    }
}

export default  Formsy.HOC(MyInputHOC);

MyForm.js

import React from 'react';
import Formsy from 'formsy-react-2';
import MyInput from './MyInput';
import MyInputHOC from './MyInputHOC';
// Using your new component

class MyForm extends React.Component {
    state = {
        formIsValid: false
    }

    enableSubmit() {
        this.setState({formIsValid: true});
    }

    disableSubmit() {
        this.setState({formIsValid: false});
    }

    submit(model) {
        console.log(model);
        // model = {
        //   foo: 'foo@foo.com',
        //   bar: 10
        // }
    }

    // This code results in a form with a submit button that will run the `submit`
    // method when the submit button is clicked with a valid email. The submit button
    // is disabled as long as
    // - the foo input is empty or the value is not an email; and
    // - the bar input is not an integer.
    // On validation error it will show the error message.

    render() {
    return(
            <Formsy.Form onValidSubmit={this.submit} onValid={this.enableSubmit} onInvalid={this.disableSubmit}>
                <MyInput name='foo' validations='isEmail' validationError='This is not a valid email' required/>
                <MyInputHOC name='bar' validations='isInt' validationError='This is not an integer' />
                <button type="submit" disabled={!this.state.formIsValid}>Submit</button>
            </Formsy.Form>
    )

    }
}