Quiero pasar el valor de toda la fila de una tabla a una función cuando se selecciona el botón de opción en la fila. Este es el código de la tabla.
<table className="table table-bordered table-stripped"> <thead> <th>AD Type</th> <th>AD Title</th> <th>Image/Video URL</th> <th>Video Thumbnail</th> <th>Landing URL</th> <th>Placement</th> <th>Country</th> <th>DSP</th> <th>Select</th> </thead> <tbody> { creative.map( creative => <tr key = {creative.id}> <td>{creative.ad_type}</td> <td>{creative.ad_title}</td> <td>{creative.image_url}</td> <td>{creative.video_thumbnail}</td> <td>{creative.landing_url}</td> <td>{creative.placement}</td> <td>{creative.country}</td> <td>{creative.dsp}</td> <td> <input type="radio" class="checkbox1" id="chk" name="check[]" value={creative} onClick={func1} /></td> </tr> ) } </tbody> </table> Y la función func1 simplemente registra el valor
const func1 = (e) => { console.log(e.target.value); } Cuando estoy usando value = {creative} , la salida registrada es [object Object] . Incluso intenté usar value = {creative.ad_type, creative.ad_title} pero solo registra el último valor, en este caso, creative.ad_title . Quiero registrar todos los valores del objeto creative .
Puede usar JSON.stringify() para convertir el valor del objeto al formato JSON.
ex:
value{ JSON.stringify(creative) } Y luego intenta obtener el valor que necesita para analizarlo con JSON.parse()
const func1 = (e) => { console.log(JSON.parse(e.target.value); }Debe pasar el número/cadena como el valor del campo de entrada. no puede pasar directamente un objeto como el valor. por lo que debe convertir el objeto en una cadena con JSON.stringify(creative) que convierte su objeto en una cadena. luego, después de onChange, obtendrá el valor y analizará este valor.
otra solución que te sugiero:
ya tienes los datos de la creatividad . simplemente pase creative.id como el valor y onChange busque ese elemento de la matriz creativa con event.target.value , que será su id.
Puede crear su componente de entrada readio personalizado
const RadioInput = ({ value, onClick }) => { return <input type="radio" value="" onClick={() => onClick(value)} />; };úsalo También puede pasar otras propiedades de entrada de radio a su componente personalizado y adjuntarlas a su entrada.
<RadioInput onClick={func1} value={creative} />