javascript - ReactJS 提交带有默认值的表单

Question

组件有一个 FormControl (react-bootstrap)，它可以定义一个 defaultValue。

其想法是:定义默认值后，表单就会提交。

我尝试定义 componentDidMount() 函数，但它无限循环(渲染 - 提交 - 渲染...)

编辑:我不允许共享生产代码(公司政策)。相反，我制作了一个片段来尝试解释这种情况:

export default class MyForm extends React.Component {
    componentDidMount() {
        // This was my first approach.
        // Which did not work since after submitting
        // the component re-renders, submits and so on...
        if (this.props.defaultValue) {
            document.getElementById('formName').submit();
        }
    }

    handleFormSubmit(event) {
        event.preventDefault();
        // doSomethingWithFormData(event);
    }

    render() {
        <Form inline onSubmit={(ev) => this.handleFormSubmit(ev)} id='formName'>
            <FormGroup controlId="ValueFormGroup">
                <FormControl
                    type="text"
                    id="formName"
                    name="fieldName"
                    required={true}
                    defaultValue={this.state.value}
                />
                &nbsp;
                <Button 
                    type="submit"
                    bsStyle="primary"
                </Button>
            </FormGroup>
        </Form>
    }
}

可以通过 GET 参数 ( http://url.com/something?value=aValue ) 接收 FormControl defaultValue 的值。
如果收到这样的值，则将填写表单的输入并提交表单。然后，将要求 REST 服务提供结果，最后，当结果到达时，填写表格下方的表格。所有这些都是由handleFormSubmit()完成的。

提交表单后，页面会无限期地重新加载。

Answer 1

我已经找到解决办法了。我在下面写下详细信息，以防有人发现它们有用:解决该问题的方法:

componentDidMount() {
    if (this.props.defaultValue) {
        const event = new Event('submit', {cancelable: true});
        document.getElementById('formName').dispatchEvent(event);
    }
}

{cancelable: true} 是其中最重要的事情，因为对于 event.preventDefault();要工作(防止页面重新加载)，事件必须是 cancellable .

我不是 react 专家，所以我愿意接受建议:)