Tengo un componente React que representa una matriz con un campo de entrada y un botón de opción. El campo de entrada funciona bien, pero al hacer clic en el botón de opción, aunque el estado se actualice, el valor no se refleja en la interfaz de usuario.
A continuación se muestra la implementación del componente React.
import React, { useState } from 'react'; import './style.css'; export default function App() { const [subTemplate, setSubTemplate] = useState([ { name: 'main', outputFormat: 'html' }, { name: 'something else', outputFormat: 'text' } ]); const handleInputChange = (value, row, key) => { const updatedSubTemplate = subTemplate.map(item => { if (item.name === row.name) { return { ...item, [key]: value }; } return item; }); console.log('updatedSubTemplate', updatedSubTemplate); // updatedSubTemplate consists of the modified value setSubTemplate(updatedSubTemplate); }; const renderSubTemplates = () => { return subTemplate.map((item, index) => { return ( <div key={index}> <input type="text" value={item.name} onChange={e => { handleInputChange(e.target.value, item, 'name'); }} /> <div> <input type="radio" name="html" checked={item.outputFormat === 'html'} onChange={e => { handleInputChange(e.target.name, item, 'outputFormat'); }} /> HTML </div> <div> <input type="radio" name="text" checked={item.outputFormat === 'text'} onChange={e => { handleInputChange(e.target.name, item, 'outputFormat'); }} /> TEXT </div> </div> ); }); }; return <div>{renderSubTemplates()}</div>; }El siguiente es un enlace de stackblitz para la implementación anterior: https://stackblitz.com/edit/react-ugat24
Nota: El botón de radio funciona como se esperaba si solo hay 1 elemento en la matriz.
Es porque tiene un valor diferente en el atributo de name .
Los botones de radio se utilizan para seleccionar una opción de una lista de opciones. por lo que necesitan tener el mismo name para agruparlos.
<input type="radio" name={`group-${index}`} checked={item.outputFormat === 'html'} onChange={e => { handleInputChange('html', item, 'outputFormat'); }} />Muestra de trabajo
Hay 2 problemas en su código.
name para todas las entradas de radio.value incorrecto para los elementos de radio. Use literales de plantilla para agregar el valor de index a cada conjunto de elementos de grupo de radio en la matriz.
Aquí está el código de trabajo
Referencias