4.9 KiB
id | title | challengeType | forumTopicId | dashedName |
---|---|---|---|---|
5a24c314108439a4d4036178 | Crea una entrada controlada | 6 | 301385 | create-a-controlled-input |
--description--
Tu aplicación puede tener interacciones más complejas entre state
y la interfaz de usuario renderizada. Por ejemplo, elementos de control de formulario para la entrada de texto, tales como input
y textarea
, mantienen su propio estado en el DOM como los tipos de usuario. Con React, puedes mover este estado mutable hacia el state
de un componente de React. La entrada del usuario se convierte en parte del state
de la aplicación, así que React controla el valor de ese campo de entrada. Por lo general, si tienes componentes de React con campos de entrada en los que el usuario puede escribir, será un formulario de entrada controlado.
--instructions--
El editor de código tiene el esqueleto de un componente llamado ControlledInput
para crear un elemento input
controlado. El state
del componente ya está inicializado con una propiedad input
que contiene una cadena vacía. Este valor representa el texto que un usuario escribe en el campo input
.
Primero, crea un método llamado handleChange()
que tiene un parámetro llamado event
. Cuando el método es llamado, este recibe un objeto event
que contiene una cadena de texto del elemento input
. Puedes acceder a esta cadena con event.target.value
dentro del método. Actualiza la propiedad input
del state
del componente con esta nueva cadena.
En el método render
, crea el elemento input
encima de la etiqueta h4
. Añade un atributo value
que es igual a la propiedad input
del state
del componente. Luego añade un manejador de eventos onChange()
establecido al método handleChange()
.
Cuando escribes en el cuadro de entrada, ese texto es procesado por el método handleChange()
, establecido como la propiedad input
en el state
local, y renderizado como el valor en el cuadro input
de la página. El state
del componente es la única fuente de verdad con respecto a los datos de entrada.
Por último, pero no menos importante, no olvides añadir los enlaces necesarios en el constructor.
--hints--
ControlledInput
debe devolver un elemento div
que contiene un input
y una etiqueta p
.
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
);
El estado de ControlledInput
debe inicializarse con una propiedad input
establecida a una cadena vacía.
assert.strictEqual(
Enzyme.mount(React.createElement(ControlledInput)).state('input'),
''
);
Escribir en el elemento de entrada debe actualizar el estado y el valor de la entrada, y el elemento p
debe renderizar este estado a medida que escribas.
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'
);
};
--seed--
--after-user-code--
ReactDOM.render(<ControlledInput />, document.getElementById('root'))
--seed-contents--
class ControlledInput extends React.Component {
constructor(props) {
super(props);
this.state = {
input: ''
};
// Change code below this line
// Change code above this line
}
// Change code below this line
// Change code above this line
render() {
return (
<div>
{ /* Change code below this line */}
{ /* Change code above this line */}
<h4>Controlled Input:</h4>
<p>{this.state.input}</p>
</div>
);
}
};
--solutions--
class ControlledInput extends React.Component {
constructor(props) {
super(props);
this.state = {
input: ''
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({
input: event.target.value
});
}
render() {
return (
<div>
<input
value={this.state.input}
onChange={this.handleChange} />
<h4>Controlled Input:</h4>
<p>{this.state.input}</p>
</div>
);
}
};