1

我使用 formsy-react-2 创建了一个表单，但它不起作用。我正进入（状态

错误：表单输入在使用时需要名称属性

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

这是我在 React JS 中的表单类的源代码。我正在使用反应版本'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>
    )

    }
}

4

1 回答 1

1

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

在MyInputComponentname中，属性通过{...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>
    )

    }
}

于 2018-10-15T08:50:53.553 回答