如果表单上所有字段都成功验证，页面将崩溃
如果表单上所有字段都成功验证，页面将崩溃
提问于 2019-06-24 08:58:52
我正在尝试获取从表单组件输入的数据和在Modal组件中输入的数据。我根据我在react-bootstrap文档中看到的内容制作了一个handleSubmit，如果一切都成功验证，它似乎会使页面崩溃。但是，如果我留下一个未验证的字段，所有内容都会按预期运行。
我尝试过改变被验证的数据类型，改变我的handleSubmit等等。
export default class Header extends Component {
constructor(props, context) {
super(props, context);
this.handleShow = this.handleShow.bind(this);
this.handleClose = this.handleClose.bind(this);
this.state = {
validated: false,
file: null,
store: "Target",
pdf: true,
price: 1.00,
category: "Supplies",
date: "01/01/2019",
description: ""
};
this.handleSubmit = this.handleSubmit.bind(this);
this.handleChange = this.handleChange.bind(this);
}
add = id => {
this.props.add(this.state.pdf,this.state.store, this.state.date, this.state.price, this.state.category, this.state.description);
};
handleSubmit(event) {
const form = event.currentTarget;
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
console.log("Failed");
}
this.setState({validated: true})
this.props.add(this.state.pdf,this.state.store, this.state.date, this.state.price, this.state.category,this.state.description );
}接下来，我的表单的布局如下：
render() {
const { validated } = this.state;
const divStyle2 = {
padding: "1em"
};
return (
<div>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossOrigin="anonymous"
/>
<h4>
<FontAwesomeIcon icon={faFileInvoiceDollar} />
?????????????
</h4>
<div style={divStyle2}>
<Nav variant="pills" activeKey="/home" expand="lg">
<Nav.Item>
<Modal show={this.state.show} onHide={this.handleClose}>
<Modal.Header closeButton>
<Modal.Title>??? ???????</Modal.Title>
</Modal.Header>
<Form
noValidate
validated={validated}
onSubmit={e => this.handleSubmit(e)}
>
<Container>
<Form.Row>
<Form.Group as={Col} md="4" controlId="file">
<Form.Label>Receipt File*</Form.Label>
<Button variant="outline-dark">
<div className="files">
<Files
className="files-dropzone"
onChange={this.onFilesChange}
onError={this.onFilesError}
accepts={["image/png", ".pdf"]}
multiple
maxFiles={3}
maxFileSize={10000000}
minFileSize={0}
clickable
>
Browse
</Files>
</div>
</Button>
</Form.Group>
</Form.Row>
<Form.Row>
<Form.Group as={Col} md="6" controlId="vendor">
<Form.Label>Vendor/Retailer*</Form.Label>
<Form.Control type="text" placeholder="" required value={this.state.store} onChange={this.handleChange}/>
<Form.Control.Feedback type="invalid">
Please provide a vendor/retailer.
</Form.Control.Feedback>
</Form.Group>
</Form.Row>
<Form.Row>
<Form.Group as={Col} md="6" controlId="date">
<Form.Label>Transaction date*</Form.Label>
<Form.Control type="date" placeholder="" required value={this.state.date} onChange={this.handleChange}/>
<Form.Control.Feedback type="invalid">
Please provide a date.
</Form.Control.Feedback>
</Form.Group>
</Form.Row>
<Form.Row>
<Form.Group as={Col} md="6" controlId="price">
<Form.Label>Receipt total ($USD)*</Form.Label>
<Form.Control
type="number"
placeholder="0.00"
required
value={this.state.price}
onChange={this.handleChange}
/>
<Form.Control.Feedback type="invalid">
Please provide a valid price.
</Form.Control.Feedback>
</Form.Group>
</Form.Row>
<Form.Row>
<Form.Group as={Col} md="6" controlId="category">
<Form.Label>Category</Form.Label>
<Form.Control type="text" placeholder="" required value={this.state.category} onChange={this.handleChange}/>
<Form.Control.Feedback type="invalid">
Please provide a valid category.
</Form.Control.Feedback>
</Form.Group>
</Form.Row>
<Form.Row>
<Form.Group as={Col} md="6" controlId="description">
<Form.Label>Description</Form.Label>
<Form.Control type="text" placeholder="" size="lg" value={this.state.description} onChange={this.handleChange}/>
</Form.Group>
</Form.Row>
<Form.Row>
<Form.Group as={Col} md="6" controlId="submit">
<Button
variant="outline-dark"
type="cancel"
onClick={this.handleClose}
>
Cancel
</Button>
<Button
variant="outline-dark"
type="submit"
onClick={this.handleSubmit}
>
??? ???????
</Button>
</Form.Group>
</Form.Row>
</Container>
</Form>
<Modal.Footer />
</Modal>
<Button variant="outline-dark" onClick={this.handleShow}>
{" "}
<FontAwesomeIcon icon={faPlus} /> ??? ???????
</Button>
</Nav.Item>
<Nav.Item className="justify-content-end">
<Nav.Link eventKey="disabled" disabled>
Report Total: ${this.props.total}
</Nav.Link>
</Nav.Item>
</Nav>
<hr />
</div>
</div>
);
}预计如果一切都通过了验证，程序就会正常运行。相反，它会崩溃并重新加载整个网页。我试着去掉handleSubmit底部的this.props.add，但是得到了同样的结果--崩溃。需要注意的是，不知何故，add运行了两次并生成了两个组件。但是，我认为这是一个单独的bug。
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-06-24 09:06:34
尝试将event.preventDefault();和event.stopPropagation();移到if语句之外，例如：
handleSubmit(event) {
event.preventDefault();
event.stopPropagation();
const form = event.currentTarget;
if (form.checkValidity() === false) {
console.log("Failed");
}
this.setState({validated: true})
this.props.add(this.state.pdf,this.state.store, this.state.date, this.state.price, this.state.category,this.state.description );
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56728759
复制相关文章
相似问题