Реагировать на форму: для ввода формы требуется свойство name при использовании

Question

Я создал форму, используя формы-реаги-2, но она не работает.Я получаю

Ошибка: при вводе формы требуется свойство имени при использовании

Я новичок в React JS. Я не знал, какой пакет лучше всего работать при работе с формами вРеагировать 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>
    )

    }
}

Answer 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>
    )

    }
}