0
121
Views¿Cómo puedo actualizar este JSON con TextFields?
Tengo un grupo de TextFields dentro de un cuadro de diálogo material-ui. Los campos de texto se rellenan con JSON, cuyo ejemplo se puede ver a continuación. Tal como está ahora, puedo completar TextFields, pero no puedo actualizarlos. No puedo ingresar más texto en estos campos de texto después de que se hayan completado.
Así es como se ven mis campos de texto
const [singleSizing, setSingleSizing] = useState(""); const SizingTextFields = ({ val, label, disabled, select }) => { return ( <TextField value={val} label={label} variant="outlined" onChange={(e) => updateSingleSizing(e.target.value)} style={{ margin: "1em", minHeight: "1em", minWidth: "15em" }} select={select} disabled={disabled} /> ); }; function updateSingleSizing(newData) { for (var i = 0; i < singleSizing.length; i++) { if (singleSizing[i].Domain !== newData) return singleSizing[i].Domain === newData; if (singleSizing[i].Experience !== newData) return singleSizing[i].Experience === newData; if (singleSizing[i].SizingContact !== newData) return singleSizing[i].SizingContact === newData; if (singleSizing[i].SizingComments !== newData) return singleSizing[i].SizingComments === newData; } }Mi ejemplo JSON:
{ "Domain": "Stack Overflow", "Experience": "SO", "SizingContact": "Ciaran Crowley", "SizingComments": "Test update 2" }2 answers
Answer question0
El objeto singleSizing no se actualiza cuando el texto cambia del evento onChange de TextField . La función updateSingleSizing solo devuelve los nuevos valores pero no actualiza el objeto singleSizing .
Entonces necesitamos una función para actualizar el objeto singleSizing . La función onTextChange actualiza el objeto singleSizing (más información sobre la sintaxis extendida ) cuando cambia el texto de TextField .
const onTextChange = (e) => { const id = e.target.id; const value = e.target.value; setSingleSizing({ ...singleSizing, [id]: value }); }; Y los TextFields actualizados con la propiedad id para actualizar la propiedad real del objeto singleSizing .
<SizingTextFields id="taxonomyId" val={singleSizing.taxonomyId} label={"Taxonomy Id"} /> <SizingTextFields id="domain" val={singleSizing.domain} label={"Domain"} /> <SizingTextFields id="experience" val={singleSizing.experience} label={"Experience"} /> .... Además, la propiedad select de TextField espera opciones y componentes secundarios. Entonces, la función SizingTextFields se actualizó con el componente secundario.
const SizingTextFields = ({ id, val, label, disabled, select = false, options = [] }) => { return select ? ( <TextField id={id} value={val} label={label} variant="outlined" onChange={onTextChange} style={{ margin: "1em", minHeight: "1em", minWidth: "15em" }} select SelectProps={{ native: true }} disabled={disabled} > {options.map((option) => ( <option key={option.value} value={option.value}> {option.label} </option> ))} </TextField> ) : ( <TextField id={id} value={val} label={label} variant="outlined" onChange={onTextChange} style={{ margin: "1em", minHeight: "1em", minWidth: "15em" }} disabled={disabled} /> ); };Los códigos y caja actualizados
0
Debe usar la función setSingleSizing para actualizar su estado. No debe cambiar su estado directamente como en su función updateSingleSizing. También está devolviendo un booleano usando el operador ===. Intente algo como esto (no estoy implementando su lógica de matriz).
onChange={(e) => setSingleSizing(e.target.value)}