state
качестве реквизита дочерних компонентов, но вы не ограничены передачей данных. Вы также можете передавать функции обработчика или любой метод, определенный в компоненте React для дочернего компонента. Так вы позволяете дочерним компонентам взаимодействовать со своими родительскими компонентами. Вы передаете методы ребенку точно так же, как обычный пропеллер. Ему назначено имя, и у вас есть доступ к этому имени метода под this.props
в дочернем компоненте. MyApp
компонент является родителем , который будет оказывать GetInput
и RenderInput
дочерние компоненты. Добавьте GetInput
компонент к методу визуализации в MyApp
, а затем передать его на опору называется input
, назначенный inputValue
из MyApp
«s state
. Также создайте handleChange
называемое handleChange
и передайте ему обработчик handleChange
ввода. Затем добавьте RenderInput
в метод рендеринга в MyApp
, затем создайте inputValue
с именем input
и передайте inputValue
из state
в него. После того, как вы закончите, вы сможете input
поле input
в компоненте GetInput
, которое затем вызывает метод обработчика в своем родителе через реквизиты. Это обновляет ввод в state
родителя, который передается как реквизит для обоих детей. Наблюдайте за тем, как данные передаются между компонентами и как единственный источник истины остается в state
родительского компонента. По общему признанию, этот пример немного надуман, но должен служить для иллюстрации того, как данные и обратные вызовы могут быть переданы между компонентами React. MyApp
должен отображать.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyApp)); return mockedComponent.find("MyApp").length === 1; })(), "The MyApp
component should render.");'
- text: ''
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyApp)); return mockedComponent.find("GetInput").length === 1; })(), "The GetInput
component should render.");'
- text: ''
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyApp)); return mockedComponent.find("RenderInput").length === 1; })(), "The RenderInput
component should render.");'
- text: ''
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyApp)); const state_1 = () => { mockedComponent.setState({inputValue: ""}); return waitForIt(() => mockedComponent.state() )}; const state_2 = () => { mockedComponent.find("input").simulate("change", {target: {value: "TestInput"}}); return waitForIt(() => mockedComponent.state() )}; const updated_1 = await state_1(); const updated_2 = await state_2(); assert(updated_1.inputValue === "" && updated_2.inputValue === "TestInput", "The GetInput
component should receive the MyApp
state property inputValue
as props and contain an input
element which modifies MyApp
state."); }; '
- text: ''
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyApp)); const state_1 = () => { mockedComponent.setState({inputValue: "TestName"}); return waitForIt(() => mockedComponent )}; const updated_1 = await state_1(); assert(updated_1.find("p").text().includes("TestName"), "The RenderInput
component should receive the MyApp
state property inputValue
as props."); }; '
```
{this.props.input}