Как правильно через пропс передать состояние?Подскажите плиз.Модал открывается, но не закрывается + я уверен что не так это прокидывается
import React from "react";
import {MDBContainer, MDBRow, MDBCol, MDBMask, MDBBtn} from "mdbreact";
import Modal from "./Modal";
class Intro extends React.Component {
constructor(props) {
super(props);
}
state = {
modal9: false
};
toggle = nr => () => {
let modalNumber = "modal" + nr;
this.setState({
[modalNumber]: !this.state[modalNumber]
});
};
render() {
return (
<header
className="d-flex justify-content-center align-items-center gradient header"
id="main"
>
<MDBMask>
<MDBContainer>
<MDBRow>
<div className="white-text text-center text-md-left col-md-6 mt-xl-5 mb-5">
<h1 className="h1-responsive font-weight-bold mt-sm-5">
Почему мы?
</h1>
<hr className="hr-light"/>
<h6 className="mb-4">
Высокий профессиональный уровень специалистов. Врачи имеют
большой опыт практической работы, систематически проходят
курсы повышения квалификации в образовательных центрах мира,
принимают участие в международных семинарах и конференциях.
</h6>
<MDBBtn color="white" onClick={this.toggle(9)}>
Получи консультацию бесплатно
</MDBBtn>
</div>
<MDBCol md="6" xl="5" className="mt-xl-5"/>
</MDBRow>
</MDBContainer>
</MDBMask>
<Modal foo={this.state.modal9}/>
</header>
);
}
}
export default Intro;
и сам модал
import {
MDBBtn,
MDBCol,
MDBContainer,
MDBIcon,
MDBInput,
MDBModal,
MDBModalBody,
MDBModalHeader,
MDBRow
} from "mdbreact";
import React from "react";
import axios from "axios";
export default class Modal extends React.Component {
constructor(props) {
super(props);
this.state = {
name: "",
email: "",
message: ""
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange = e => {
this.setState({[e.target.name]: e.target.value});
};
async handleSubmit(e) {
e.preventDefault();
const {name, email, message} = this.state;
const form = await axios.post("/api/form", {
name,
email,
message
});
}
render() {
return (
<MDBModal isOpen={this.props.foo} centered>
<MDBModalHeader toggle={this.props.foo}>
Опишите вашу проблему ниже:
</MDBModalHeader>
<MDBModalBody>
<MDBContainer>
<MDBRow>
<MDBCol md="12">
<form onSubmit={this.handleSubmit}>
<p className="h5 text-center mb-4">
Мы всегда рады помочь вам
</p>
<div className="grey-text">
<MDBInput
className="senderName"
label="Ваше имя"
name="name"
icon="user"
group
type="text"
validate
error="wrong"
success="right"
onChange={this.handleChange}
/>
<MDBInput
className="senderEmail"
label="Ваш email"
name="email"
icon="envelope"
group
type="email"
validate
error="wrong"
success="right"
onChange={this.handleChange}
/>
<MDBInput
className="senderSubject"
label="Тема"
name="subject"
icon="tag"
group
type="text"
validate
error="wrong"
success="right"
onChange={this.handleChange}
/>
<MDBInput
className="senderMessage"
type="textarea"
name="message"
rows="2"
label="Ваше сообщение"
icon="pencil-alt"
onChange={this.handleChange}
/>
</div>
<div className="text-center">
<MDBBtn type="submit" outline color="secondary">
Отправить{" "}
<MDBIcon far icon="paper-plane" className="ml-1"/>
</MDBBtn>
</div>
</form>
</MDBCol>
</MDBRow>
</MDBContainer>
</MDBModalBody>
</MDBModal>
);
}
}
Проблема в следующем вызове компонента:
<MDBModalHeader toggle={this.props.foo}>
Опишите вашу проблему ниже:
</MDBModalHeader>
Вы передаете в toggle
булево значение, а нужно передать функцию.
Чтобы решить проблему можно поступить следующим образом:
1) Изменить вызов <Modal />
, добавив пропсу onToggle
(в нее передаем фукнцию тогла).
<Modal foo={this.state.modal9} onToggle={this.toggle(9)} />
2) Новую пропсу передадим в <MDBModalHeader />
<MDBModalHeader toggle={this.props.onToggle}>
Опишите вашу проблему ниже:
</MDBModalHeader>
Надеюсь, данное решение вам поможет!
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Мне нужно составить регулярное выражение что бы оно находило в тексте дату в разных форматах, при том записывая в совпадения только число...