Mi función de cambio en mi casilla de verificación siempre está indefinida. Hice una caja de arena para simplificar mi problema. Intenté cambiarlo de un lado a otro entre una flecha y una función normal, y dejé el enlace como su estado predeterminado en lugar de vincularlo a su enlace en el constructor.
import "./styles.css"; import React, { Component } from "react"; class App extends Component { constructor(props) { super(props); this.renderCheckboxes = this.renderCheckboxes.bind(this); this.checkboxChange = this.checkboxChange.bind(this); } checkboxChange = (event) => { console.log("CHANGED"); } renderCheckboxes(checkboxes) { return checkboxes.map(function (obj, idx) { return ( <div> <label>{obj.name}</label> <input type="checkbox" onChange={this.checkboxChange} /> </div> ); }); } render() { const cbList = [ { name: "A", mood: "Happy" }, { name: "B", mood: "Sad" }, { name: "C", mood: "Mad" } ]; return <>{this.renderCheckboxes(cbList)}</>; } } export default App;Su función no está definida porque está perdiendo su contexto cuando sucede su checkboxes.map .
renderCheckboxes(checkboxes) { return checkboxes.map(function (obj, idx) { // here return ( <div> <label>{obj.name}</label> <input type="checkbox" onChange={this.checkboxChange} /> </div> ); }); }Puede cambiar la función por una función de flecha, para que no pierda el contexto:
renderCheckboxes(checkboxes) { return checkboxes.map((obj, idx) => { // here return ( <div> <label>{obj.name}</label> <input type="checkbox" onChange={this.checkboxChange} /> </div> ); }); } Puede que no sea el caso, pero si necesita enviar algún parámetro en su checkboxChange de verificación Cambiar llamada, puede usarlo así:
checkboxChange = (value) => { // need to set the variable here console.log(value); } renderCheckboxes(checkboxes) { return checkboxes.map((obj, idx) => { return ( <div> <label>{obj.name}</label> <input type="checkbox" onChange={() => this.checkboxChange('test')} /> <!-- so you can pass it from here --> </div> ); }); }Solución fácil, es porque el enlace no funciona dentro de la función de map como lo tiene ahora. Para ver esto en acción, intente simplemente representar una casilla de verificación, sin map y verá que su método de cambio de casilla de verificación funciona.
Dos cambios que sugiero:
return checkboxes.map((obj, idx) => { ... } onChange={() => this.checkboxChange()}