0
144
VistasCómo detectar el botón de opción cambiado en la aplicación React
Tengo una aplicación de reacción donde tengo una tabla de botones de radio y los estoy recorriendo
aquí está mi código:
const setValue = (item, position) => { switch(item[0]) { case 'dashboard': if(permissions.dashboard == item[1]) { return true; } break; case 'user_management': if(permissions.user_management == item[1]) { return true; } break; case 'users_feedback': if(permissions.users_feedback == item[1]) { return true; } break; case 'settings': if(permissions.settings == item[1]) { return true; } break; case 'content_management': if(permissions.content_management == item[1]) { return true; } break; case 'influencers': if(permissions.influencers == item[1]) { return true; } break; } } const handleChangePermission = (e) => { console.log('Handle Change'); } Object.entries(permissions).map((item, i) => ( <tr className="permission-row" key={item[0]}> <td>{item[0]}</td> <td><input type="radio" id={item[0] + i} name={item[0]} defaultChecked={setValue(item, i)} onChange={(e) => handleChangePermission(e.target.value)}/></td> <td><input type="radio" id={item[0] + i} name={item[0]} defaultChecked={setValue(item, i)} onChange={(e) => handleChangePermission(e.target.value)}/></td> <td><input type="radio" id={item[0] + i} name={item[0]} defaultChecked={setValue(item, i)} onChange={(e) => handleChangePermission(e.target.value)}/></td> </tr> )) y aquí lo que parece: 
y este es el objeto de permisos que tengo:
{ "dashboard": 3, "user_management": 3, "users_feedback": 3, "settings": 3, "content_management": 3, "influencers": 3 } Tengo un objeto con valores predeterminados llamados permisos y estoy recorriéndolos con éxito y mostrando los datos correctos. Mi pregunta es, ¿cómo detecto un cambio en un botón de radio, para poder cambiarlo en los permissions de ese objeto?
Editar: agregué el método onChange pero aún no está desencadenando lo que parece apostar el problema aquí.
PD: estoy usando los botones de radio de la biblioteca de reactstrap para diseñar
2 Respuestas
Responde la pregunta0
Hubo algunas correcciones que hacer.
- Use
onClicken lugar del eventoonChangepara realizar funciones con botones de opción. Consulte esta respuesta para obtener más información . - De acuerdo con sus requisitos, el
valuede su botón de radio debe estar codificado comovalue=1,value=2,value=3respectivamente. - Modifique su
handleChangePermissioncomo se muestra a continuación.
JSX
<td> <input type="radio" id={item[0] + i} name={item[0]} defaultChecked={setValue(item, i)} value="1" onClick={handleChangePermission} /> </td>función modificada
const handleChangePermission = (e) => { const name = e.target.name; const value = parseInt(e.target.value); permissions[name] = value; }; Aquí simplemente definimos la función handleChangePermission para aceptar eventos sintéticos para que podamos acceder al name y value del botón de entrada de opción. Dado que el name y el value del botón de opción son los mismos valores para la clave y el valor del objeto de permissions , podemos asignar acceso a la clave y modificar el valor como se indicó anteriormente.
0
agregue el segundo argumento al mapa (funciona como un iterador - desde 0 hasta el último elemento de la matriz - [0,1,2,3,4...] :
object.map((number, i) => <li defaultChecked ={() => setValue(item, i)}></li> ); para detectar el cambio de radio, agregue solo onChange() con la función:
const function = () => { //your code } <CustomInput onChange={() => function} type="radio" id={item[0] + i} name={item[0]} defaultChecked={setValue(item, i)} />