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. 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."); }; '
```
{this.state.input}