Tengo una tarjeta pequeña que tiene un interruptor de palanca y quiero que se publique true cuando se activa y false cuando se desactiva. Ya he creado la tarjeta y la funcionalidad. Simplemente no estoy seguro de dónde crear el punto final que envía datos al backend.
Aquí es donde funciona el interruptor.
<div style={{ paddingLeft: "35px" }}> <div className="order-card"> <div className="header-section"> <h2 className="card-titles">Customer Notifications</h2> </div> <h4 style={{ padding: "12px 15px" }} className="order-title"> Send customers reminders before auto-payment date </h4> <div style={{ width: "70%", textAlign: "left" }}> <Switch checked={this.state.isNotificationEnabled} onChange={e => this.setState({ isNotificationEnabled: e.target.checked }) } color="primary" /> </div> </div> </div> Cuando activa el interruptor, cambia el estado a verdadero, por lo que this.state.isNotificationEnabled = true .
Ahora aquí está la pregunta. ¿Puedo crear el punto final en componentDidMount() ?
async componentDidMount() { this.saveGmailInfo(); console.log( "this.state.isNotificationEnabled", this.state.isNotificationEnabled ); const code = this.props.history.location.query.code; if (code) { const ep = `${process.env.REACT_APP_API}/partners/zoom/auth`; const results = await axios.post(ep, { code }); if (results.data.success) { this.setState({ zoom: true }); this.props.history.push("/partners/customization"); window.location.reload(); } else { // toast.error(results.data.message) this.props.history.push("/partners/customization"); } } else { } // get permissions for logo + dashboard await this.getLogoAndDashboardPermissions(); await this.getThemePermissions(); await this.getMailChimpPermissions(); await this.getZoomPermissions(); } En este momento, cuando alterno el Switch, no veo el registro de la consola debajo de console.log("this.state.isNotificationEnabled",this.state.isNotificationEnabled) Eso significa que no estoy presionando la función componentDidMount . ¿Cómo puedo presionar esa función para poder crear mi punto final allí?
componentDidMount solo se llamó una vez en el renderizado inicial.
puede llamar a la función cuando cambie el valor del interruptor.
<Switch checked={this.state.isNotificationEnabled} onChange={e => { this.setState({ isNotificationEnabled: e.target.checked }) // you can add code that sends the switch value to the backend } } color="primary" />