我正在尝试从Modal组件中输入的数据中提取Form组件中输入的数据。我已经在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被运行两次并生成两个组件可能会很有用。但是，我正在考虑一个单独的错误。
答案 0 :(得分：0)
尝试将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 );
}