模态关闭后页面不会更新

时间:2019-10-09 12:55:41

标签: reactjs bootstrap-modal react-bootstrap

因此,用户单击按钮编辑将打开模式。他在那里可以更改信息,然后保存。之后,他被重定向到仍然有旧信息的主页

所以我尝试使用push方法重定向,然后重新加载页面,但数据仍未更新

EditConsigne类扩展了组件{

handleSubmit = (e) => {
    e.preventDefault()
    this.props.editConsigne(this.state)             
    this.props.history.push('/consigne')
    window.location.reload();

}

render () {

    const { auth } = this.props

    if (auth.logIn === false) {
        return <Redirect to='/connexion'/>
    }

    return(
        <Modal
            size="lg"
            aria-labelledby="contained-modal-title-vcenter"
            centered
            show={this.props.show}
            onHide={this.props.onHide}
        >
            <Modal.Header closeButton>
                <Modal.Title id="contained-modal-title-vcenter">
                    {this.props.consigne.name}
                </Modal.Title>
            </Modal.Header>
            <Modal.Body>
                <h6> Modification </h6>
                <Form style={{marginTop: 0}} onSubmit={this.handleSubmit}>
                    <Form.Group as={Row} controlId="name">
                        <Form.Label column sm={2}>Nom </Form.Label>
                        <Col sm={10}>
                            <Form.Control 
                                type="name" 
                                placeholder={this.props.consigne.name}
                                value={this.state.name}
                                onChange={this.handleChange}
                            />
                        </Col>
                    </Form.Group>
                    <Form.Group as={Row} controlId="description">
                        <Form.Label column sm={2}>Description</Form.Label>
                        <Col sm={10}>
                            <Form.Control 
                                as="textarea"
                                type="description" 
                                placeholder={this.props.consigne.description}
                                value={this.state.description}
                                onChange={this.handleChange}
                            />
                        </Col>
                    </Form.Group>
                    <Form.Group as={Row} controlId="operation">
                        <Form.Label column sm={2}>Types d'opération</Form.Label>
                        <Col sm={10}>
                            <Form.Control 
                                type="description" 
                                placeholder={this.props.consigne.operation}
                                value={this.state.operation}
                                onChange={this.handleChange}
                            />
                        </Col>
                    </Form.Group>
                    <Form.Group as={Row} controlId="command">
                        <Form.Label column sm={2}>Commandes</Form.Label>
                        <Col sm={10}>
                            <Form.Control 
                                type="text" 
                                placeholder={this.props.consigne.command}
                                value={this.state.command}
                                onChange={this.handleChange}
                            />
                        </Col>
                    </Form.Group>
                    <Form.Group as={Row} controlId="result">
                        <Form.Label column sm={2}>Résultat</Form.Label>
                        <Col sm={10}>
                            <Form.Control 
                                type="text" 
                                placeholder={this.props.consigne.result}
                                value={this.state.result}
                                onChange={this.handleChange}
                            />
                        </Col>
                    </Form.Group>
                    <Form.Group as={Row} controlId="link">
                        <Form.Label column sm={2}>Lien</Form.Label>
                        <Col sm={10}>
                            <Form.Control 
                                type="text" 
                                placeholder={this.props.consigne.link}
                                value={this.state.link}
                                onChange={this.handleChange}
                            />
                        </Col>
                    </Form.Group>
                    <Form.Group as={Row} id="formGridCheckbox">
                        <Form.Label column sm={2}> Temporaire</Form.Label>
                            <Col sm={10}>
                                <Form.Check
                                    label="Souhaitez-vous rendre cette consigne temporaire ?" 
                                    type="checkbox"
                                    checked={this.state.status}
                                    onChange={this.handleChecked}
                                />
                            </Col>
                    </Form.Group>
                </Form>
            </Modal.Body>
            <Modal.Footer>
                <Button variant="success" onClick={this.handleSubmit}>Enregistrer</Button>
                <Button variant="secondary" onClick={this.props.onHide}>Close</Button>
            </Modal.Footer>
        </Modal>
    )
}

}

const mapDispatchToProps = (dispatch) => {
    return {
        editConsigne: (consigne) => dispatch(editConsigne(consigne))
    }
}

const mapStateToprops = (state) => {
    return {
        auth: state.auth,
    }
}

export default withRouter((connect(mapStateToprops, mapDispatchToProps)(EditConsigne)))

0 个答案:

没有答案