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。

我不是反应专家，所以我愿意接受以下建议：）

Answer 2

您可以直接从submit()致电doSomethingWithFormData，而不是在DOM元素上调用componentDidMount：

componentDidMount() {
  if (this.props.defaultValue) {
    doSomethingWithFormData(this.props.defaultValue)
  }
}

这不会触发表单提交或页面重新加载。

ReactJS使用默认值提交表单

2 个答案: