state
y la interfaz de usuario renderizada. Por ejemplo, los elementos de control de formulario para la entrada de texto, como input
y textarea
, mantienen su propio estado en el DOM según el tipo de usuario. Con Reaccionar, puede moverse en este estado mutable de un componente Reaccionar state
. La entrada del usuario se convierte en parte del state
de la aplicación, por lo que React controla el valor de ese campo de entrada. Normalmente, si tiene componentes React con campos de entrada en los que el usuario puede escribir, será un formulario de entrada controlado.
ControlledInput
para crear un elemento de input
controlado. El state
del componente ya está inicializado con una propiedad de input
que contiene una cadena vacía. Este valor representa el texto que un usuario escribe en el campo de input
.
Primero, cree un método llamado handleChange()
que tenga un parámetro llamado event
. Cuando se llama al método, recibe un objeto de event
que contiene una cadena de texto del elemento de input
. Puede acceder a esta cadena con event.target.value
dentro del método. Actualice la propiedad de input
del state
del componente con esta nueva cadena.
En el método de procesamiento, cree el elemento de input
sobre la etiqueta h4
. Agregue un atributo de value
que sea igual a la propiedad de input
del state
del componente. A continuación, añadir un onChange()
controlador de eventos se establece en el handleChange()
método.
Al escribir en el cuadro de entrada, el texto se procesa mediante el método handleChange()
, se establece como la propiedad de input
en el state
local y se representa como el valor en el cuadro de input
en la página. El state
componente es la única fuente de verdad con respecto a los datos de entrada.
último, pero no menos importante, no olvide agregar los enlaces necesarios en el constructor.
ControlledInput
debe devolver un elemento div
que contiene una input
y una etiqueta p
.
testString: 'assert(Enzyme.mount(React.createElement(ControlledInput)).find("div").children().find("input").length === 1 && Enzyme.mount(React.createElement(ControlledInput)).find("div").children().find("p").length === 1, "ControlledInput
should return a div
element which contains an input
and a p
tag.");'
- text: El estado de ControlledInput
debe inicializarse con una propiedad de input
establecida en una cadena vacía.
testString: 'assert.strictEqual(Enzyme.mount(React.createElement(ControlledInput)).state("input"), "", "The state of ControlledInput
should initialize with an input
property set to an empty string.");'
- text: 'Al escribir el elemento de entrada, se debe actualizar el estado y el valor de la entrada, y el elemento p
debe representar este estado a medida que se escribe.'
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(ControlledInput)); const _1 = () => { mockedComponent.setState({ input: "" }); return waitForIt(() => mockedComponent.state("input"))}; const _2 = () => { mockedComponent.find("input").simulate("change", { target: { value: "TestInput" }}); return waitForIt(() => ({ state: mockedComponent.state("input"), text: mockedComponent.find("p").text(), inputVal: mockedComponent.find("input").props().value }))}; const before = await _1(); const after = await _2(); assert(before === "" && after.state === "TestInput" && after.text === "TestInput" && after.inputVal === "TestInput", "Typing in the input element should update the state and the value of the input, and the p
element should render this state as you type."); }; '
```
{this.state.input}
{this.state.input}