React-form-with-constraints无法在卸载的组件上找到DomNode

Question

我的表单扩展了FormWithConstraints的'react-form-with-constraints'版本“^ 0.2.2”，但它在其下载的包中使用react和react-dom的更高版本'16 .2.0'，但我的项目支持'15 .6.1 ”。我不确定这是不是问题。并且表单会抛出错误

Uncaught Error: Unable to find node on an unmounted component.
    at invariant (commons.chunk.js.f2d6763b.js:214)
    at Object.findDOMNode (bundle.f2d6763b.js:96653)
    at CreateCompanyForm.FormWithConstraints.showFormErrors

在FormWithConstaints文件中构建的包看起来像

handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    this.showFormErrors();
  }

  private showFormErrors() {
    const form = ReactDOM.findDOMNode(this);
    const inputs = form.querySelectorAll('[name]');
    inputs.forEach((input: any) => this.showFieldError(input));
  }

我不能切换到更高版本，因为更高版本打破了我的大部分代码。有人能帮助我吗

我的package.json看起来像

    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-form-with-constraints": "^0.2.2"

我的CompanyForm文件如下所示：

import React from 'react';
import TextInput from '../../../../components/common/input/TextInput';
import Button from '../../../../components/common/button/PrimaryButton';
import { FormWithConstraints } from 'react-form-with-constraints';
import PropTypes from 'prop-types';

class CreateCompanyForm extends FormWithConstraints {
    constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.getInitialState = this.getInitialState.bind(this);
        this.state = this.getInitialState();
    }

    getInitialState(){
        return({
            name: '',
            address:'',
        });
    }

    handleChange(event) {
        console.log("handle change");
        const target = event.currentTarget;

        this.setState({
            [target.name]: target.value
        });

        super.handleChange(event);
    }

    handleSubmit(event) {
        event.preventDefault();

        super.handleSubmit(event);

        if (!this.isValid()) {
            //dont proceed
        } else {
            this.props.onSubmit();
        }
    }

    render() {
        return (
            <div>
                <form onSubmit={this.handleSubmit}>
                    <div>Create New Company</div>
                    <div style={{marginTop: 10}} className="row">
                        <div className="col-md-6">
                            <TextInput
                                readOnly={false}
                                required={true}
                                label="Name of Company"
                                value={this.state.name}
                                onChange={this.handleChange}
                                name="name"/>
                        </div>
                        <div className="col-md-6">
                            <TextInput
                                readOnly={false}
                                required={true}
                                label="Registered Address"
                                value={this.state.address}
                                onChange={this.handleChange}
                                name="address"/>
                        </div>
                    </div>

                    <div>
                        <Button
                            label={"Create Company"}
                            onClick={this.handleSubmit}
                        />
                    </div>

                </form>

            </div>
        );
    }
}


CreateCompanyForm.propTypes ={
    onSubmit: PropTypes.func.isRequired

};

export default CreateCompanyForm;

父组件看起来像：

class CreateCompanyHome extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            reload: true,
            loading:false,
            error:{},
            success:{},
            isSuperUser: false,

        };
        this.onSubmit = this.onSubmit.bind(this);
    }

    componentDidMount(){
        this.setState({isSuperUser:Auth.isSuperUser}); //check if the user is SU
    }

    onSubmit(createCompanyParams={}){
        //call api
    }

    render() {
            return (
                <div>
                    {this.state.loading?<Loader />:null}
                    {this.state.reload?
                        <CreateCompanyForm
                            opacity={this.state.loading}
                            onSubmit={this.onSubmit}/>:null}
                </div>);
        }
}

function mapStateToProps(state) {
    return {
        userRoleSetMap: state.authentication.userRoleSet,
        cwEntityMap: state.authentication.cwEntityMap,
    };
}

export default connect(mapStateToProps)(CreateCompanyHome);

Answer 1

我使用了react-form-with-constraints-bootstrap4和上面提到的带有约束的反应形式，它解决了我的问题。我不得不为此做一些代码更改。

为了更好地理解检查https://github.com/tkrotoff/react-form-with-constraints/blob/master/examples/Bootstrap4/App.jsx