esta es mi primera pregunta aquí :) Soy relativamente nuevo en React y tengo una pregunta simple. Solo estoy tratando de agregar una nueva función que crea un Modal, luego llámelo onClick cuando presione el ícono Agregar (línea 43). ¡Gracias! PD: ya probé un par de maneras diferentes y sigo obteniendo pantallas blancas: P
export default class Dayview extends Component { constructor() { super(); this.employees = ['Qwynn']; this.hourparams = [9,19]; this.weekdays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; this.months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']; this.state = { currentDay: new Date() } } changeCurrentDay = (day) => { this.setState({ currentDay: new Date(day.year, day.month, day.number) }); } nextMonth = () => { this.setState({ currentDay: new Date(this.state.currentDay.setDate(this.state.currentDay.getDate() + 28)) }); } previousMonth = () => { this.setState({ currentDay: new Date(this.state.currentDay.setDate(this.state.currentDay.getDate() - 28)) }); } addAppt = () => { } render() { return ( <div> <div className="dayview-header"> <div className="title"> <h2>{this.months[this.state.currentDay.getMonth()]} {this.state.currentDay.getFullYear()}</h2> </div> <div className="tools"> <button onClick={this.previousMonth}> <AddBoxIcon className="material-icons"/> </button> <button onClick={this.previousMonth}> <ArrowBackIcon className="material-icons"/> </button> <p>{this.months[this.state.currentDay.getMonth()].substring(0, 3)} {this.state.currentDay.getDate()}</p> <button onClick={this.nextMonth}> <ArrowForwardIcon className="material-icons"/> </button> </div> </div> <DayviewHours /> </div> ) } }Debido a que está utilizando un componente de clase, primero debe declarar/inicializar un objeto open dentro de su constructor this.state para controlar si el modal está abierto o cerrado. Su valor predeterminado debe ser false ,
this.state = { currentDay: new Date(), open: false }; En el componente Modal, puede pasar en el estado open como accesorio para controlar el modal,
<Modal open={this.state.open} onClose={this.handleClose} >Aquí está tu botón,
<button onClick={this.handleOpen}> <AddBoxIcon className="material-icons" /> </button>Para abrir el modal,
handleOpen = () => { this.setState({ open: true }); }; Para cerrar el modal, puede usar el accesorio onClose proporcionado por el documento MUI,
La devolución de llamada se activa cuando el componente solicita que se cierre. El parámetro de razón se puede usar opcionalmente para controlar la respuesta a onClose
handleClose = () => { this.setState({ open: false }); };Código completo aquí en codesandbox: Demo