У меня есть компонент-обертка, который отображает формы как дочерние. Оболочка клонирует дочерние элементы и передает свои методы как подпорки дочерним элементам. Дочерние элементы вызывают переданные реквизиты из оболочки. В общих чертах это выглядит примерно так:
class Wrapper extends React.Component {
constructor(props){//...init code}
//method that sets the state according to arguments passed when called
customInput(key,value){
this.setState({
[key]:value
})
}
render(){
return (
{React.Children.map(
this.props.children,
child => React.cloneElement(child, {
handleInputChange: this.handleInputChange,
customInput : this.customInput,
loading: this.state.loading
})
)}
)
}
Я бы использовал оболочку так:
const FormComponent = (props) => (
<React.Fragment>
<MyFormElementComponent selectMonth={props.customInput}/>
</React.Fragment>
)
class FormContainer extends React.Component {
render(){
return (
<Wrapper>
<FormComponent/>
</Wrapper>
)
}
}
Компонент при монтировании вызывает метод customInput()
, который был передан оболочкой, а customInput()
устанавливает состояние компонента оболочки.
Я хочу отметить, что мой код работает, поэтому настройка кажется правильной, и я уже некоторое время так его использую, однако я только недавно заметил, что он НЕ работает, когда я перезагружаю страницу. Цель состоит в том, чтобы позволить элементу формы установить некоторые данные «по умолчанию» в состоянии оболочки, когда он монтируется. Это хорошо работает, когда я монтирую / перемещаюсь откуда-то еще в приложении.
Однако, если я перезагружаю страницу, все монтируется правильно (если я console.log(key,value)
внутри customInput()
зарегистрированные значения верны, однако это НЕ обновляет состояние.
Я не понимаю, почему setState () не устанавливает состояние при монтировании только при перезагрузке страницы, но работает нормально, если я монтирую его из другого места в приложении.
Подведем итог:
Компонент обертки клонирует дочерний элемент и передает методы как реквизит дочернему элементу. Этот метод устанавливает состояние в Wrapper.
при монтировании дочерний метод вызывает метод и передает аргументы.
Оболочка обновляет состояние с помощью переданных аргументов.
В большинстве случаев работает, кроме перезагрузки страницы.
Помощь