OnSubmit 在表单中不起作用答案

【问题标题】：OnSubmit not working in formOnSubmit 在表单中不起作用
【发布时间】：2018-08-06 05:22:11
【问题描述】：

渲染函数返回以下组件：

<form onSubmit={(e) => this.filter(e)}>
            <Modal className='side-modal' show={this.props.show} onHide={this.props.hide}>
                <Scrollbars autoHide>
                    <Modal.Header closeButton>
                        <Modal.Title>Filter</Modal.Title>
                    </Modal.Header>
                    <Modal.Body>
                        <FormGroup>
                            <ControlLabel>Search Based On Keywords</ControlLabel>
                            <FormControl value={this.state.searchInput} type='text' placeholder='Legal Entity Name, DBA Name, Email or Processor Submerchant ID' onChange={this.setInputSearchText} />
                        </FormGroup>
                        <FormGroup>
                            <ControlLabel>Account Status</ControlLabel>
                            <CustomSelect
                                selectID={'accountStatus'}
                                hasListIcon={true}
                                listItemDetails={this.state.itemList}
                                defaultItemObj={this.state.defaultItem}
                                isReset={this.state.isReset}
                                setValue={this.setAccountStatusValue}
                            />
                        </FormGroup>
                    </Modal.Body>
                </Scrollbars>
                <Modal.Footer>
                    <Button bsStyle='primary' type='submit'>
                        <span className='icon ion-checkmark icon--inner'></span> Apply
        </Button>
                    <Button type='reset' onClick={this.resetFilter}>
                        <span className='icon ion-android-refresh icon--inner'></span> Reset
        </Button>
                </Modal.Footer>
            </Modal>
        </form>

我希望表单在从键盘单击“Enter”时调用 filter 函数，但它似乎不起作用，即使在单击 Apply 时也不会调用 onSubmit。这里可能有什么问题？先感谢您。这是我的过滤功能：

filter = (e: any) => {
    e.preventDefault();
    this.getSomeReults();
    this.props.hide();
}

【问题讨论】：

能不能也写出过滤功能？ @skaranjit
你在过滤函数内部调用e.preventDefault();吗？
是的，我已经添加了。
你能把表单放在modal里面吗？
它不工作。好像还有什么问题

标签： reactjs react-bootstrap

【解决方案1】：

我猜你正在使用this plugin 模态，并且根据我可以看到的每个组件，即模态页眉、模态正文、模态页脚是分开的。所以你的代码，即

<form onSubmit={ e => this.filter(e) } >
</form>

应该进来

<ModalBody>
//Form code here
</ModalBody>

【讨论】：