Soy nuevo en Reaccionar. Estaba escribiendo un formulario simple, usando ganchos useState y useReducer. Después de escribir en el campo de entrada un número ej. 5 y al enviar el formulario, mi valor de campo de texto que se muestra en la parte superior de la página HTML es igual a 16. Me gustaría que este número se inserte automáticamente como un nuevo estado o valor inicial en el campo de entrada. Traté de hacer esto escribiendo: value={textField} pero en ese caso no puedo modificar el campo de entrada en la página HTML.
import React, {useReducer, useState} from "react"; export default function App(){ const [text, setText] = useState(0); console.log(text) function handleChange(e) { e.preventDefault(); setText(e.target.value) } function onSubmit(e){ e.preventDefault() setTextField() } const [textField, setTextField] = useReducer( (textField) => { textField = text; if (textField === 1){ textField=1; }else if (textField%2 === 0){ textField = textField/2 }else if (textField%2 !== 0){ textField = textField * 3 + 1; } return textField; }, 0); return ( <div> <form onSubmit> <h1>{textField}</h1> <input type="text" value={text} onChange={handleChange}/> <button className="button" onClick={onSubmit} > Collatz it! </button> </form> </div> ) }Antes de devolver el valor de textField desde useReducer, puede actualizar el valor del text usando setText . Como esto. Demostración de trabajo
import React, { useReducer, useState } from "react"; export default function App() { const [text, setText] = useState(0); console.log(text); function handleChange(e) { e.preventDefault(); setText(e.target.value); } function onSubmit(e) { e.preventDefault(); setTextField(); } const [textField, setTextField] = useReducer((textField) => { textField = text; if (textField === 1) { textField = 1; } else if (textField % 2 === 0) { textField = textField / 2; } else if (textField % 2 !== 0) { textField = textField * 3 + 1; } setText(textField); return textField; }, 0); return ( <div> <form onSubmit> <h1>{textField}</h1> <input type="text" value={text} onChange={handleChange} /> <button className="button" onClick={onSubmit}> Collatz it! </button> </form> </div> ); }Creo que renunciar al reductor para hacerlo más simple, y agregar otro estado local para el número "textField" debería resolverlo, como:
import React, { useState } from "react"; export default function App() { const [text, setText] = useState(0); const [textField, setTextField] = useState(0); console.log(text); function handleChange(e) { e.preventDefault(); setText(e.target.value); } function onSubmit(e) { e.preventDefault(); setTextField(getTextField(textField)); } function getTextField(textField) { let result = 0; if (textField === 1) { result = 1; } else if (textField % 2 === 0) { result = textField / 2; } else if (textField % 2 !== 0) { result = textField * 3 + 1; } return result; }; return ( <div> <form onSubmit> <h1>{textField}</h1> <input type="text" value={text} onChange={handleChange} /> <button className="button" onClick={onSubmit}> Collatz it! </button> </form> </div> ); }Por lo que entiendo, solo necesita establecer su valor de textField en su valor de texto justo después de setTextField
La función onSubmit debería verse así:
function onSubmit(e) { e.preventDefault(); setTextField(); setText(textField); }