--- id: 5a24c314108439a4d4036178 title: Create a Controlled Input challengeType: 6 isRequired: false videoUrl: '' localeTitle: Criar uma entrada controlada --- ## Description undefined ## Instructions
O editor de código tem o esqueleto de um componente chamado ControlledInput para criar um elemento de input controlado. O state do componente já foi inicializado com uma propriedade de input que contém uma cadeia vazia. Este valor representa o texto que um usuário digita no campo de input . Primeiro, crie um método chamado handleChange() que tenha um parâmetro chamado event . Quando o método é chamado, ele recebe um objeto de event que contém uma cadeia de texto do elemento de input . Você pode acessar essa string com event.target.value dentro do método. Atualize a propriedade de input do state do componente com essa nova cadeia. No método render, crie o elemento de input acima da tag h4 . Adicione um atributo de value que seja igual à propriedade de input do state do componente. Em seguida, adicione um manipulador de eventos onChange() ao método handleChange() . Quando você digita na caixa de entrada, esse texto é processado pelo método handleChange() , definido como a propriedade de input no state local e renderizado como o valor na caixa de input na página. O state componente é a única fonte de verdade em relação aos dados de entrada. Por último, mas não menos importante, não se esqueça de adicionar as ligações necessárias no construtor.
## Tests
```yml tests: - text: ControlledInput deve retornar um elemento div que contém uma input e uma tag 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: O estado de ControlledInput deve ser inicializado com uma propriedade de input definida como uma cadeia vazia. 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: 'Digitar no elemento de entrada deve atualizar o estado e o valor da entrada, e o elemento p deve renderizar esse estado conforme você digita.' 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."); }; ' ```
## Challenge Seed
```jsx 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 (
{ /* change code below this line */} { /* change code above this line */}

Controlled Input:

{this.state.input}

); } }; ```
### After Test
```js console.info('after the test'); ```
## Solution
```js // solution required ```