Как передать состояние обратно родителю в React?
У меня есть форма с кнопкой отправки. Эта форма вызывает функцию onclick, которая устанавливает состояние чего-либо от false до true. Затем я хочу передать это состояние обратно родителю, чтобы, если оно истинно, оно отображало componentA, но если оно ложно, оно представляло componentB.
Как бы я это сделал в реакции? Я знаю, что мне нужно использовать состояние или реквизит, но не знаю, как это сделать. и это противоречит принципу одностороннего потока?
Код компонента:
<form onSubmit={this.handleClick}>
handleClick(event) {
this.setState({ decisionPage: true });
event.preventDefault();
};
Родительский компонент, который управляет тем, что он отображает:
return (
<div>
{this.props.decisionPage ?
<div>
<LoginPage />
</div>
:
<div>
<Decision showThanks={this.props.showThanks}/>
</div>
}
</div>
)
11 ответов
Переехать handleClick к родителю и передать его дочернему компоненту в качестве реквизита.
<LoginPage handleClick={this.handleClick.bind(this)}/>
Теперь в дочернем компоненте:
<form onSubmit={this.props.handleClick}>
Таким образом, отправка формы будет напрямую обновлять состояние в родительском компоненте. Это предполагает, что вам не нужно обращаться к обновленному значению состояния в дочернем компоненте. Если вы это сделаете, то вы можете передать значение состояния от родителя ребенку в качестве опоры. Односторонний поток данных поддерживается.
<LoginPage handleClick={this.handleClick.bind(this)} decisionPage={this.state.decisionPage}/>
Передать состояние как опору
Недавно я узнал о методе, который отлично подходит для изменения состояния компонента из компонента.
Возможно, это не точный ответ на этот вопрос, но он, безусловно, применим к этой ситуации и другим подобным ситуациям.
Это работает так:
установить значение по умолчанию
STATE в компоненте - Затем добавьте атрибут setState в
const Parent = () => {
const [value, setValue] = useState(" Default Value ");
return (
<Child setValue={setValue} />
)
}
Затем измените состояние (в родительском) с
Child составная часть
const Child = props => {
return (
<button onClick={() => props.setValue(" My NEW Value ")}>
Click to change the state
</button>
)
}
Когда вы нажимаете кнопку, состояние в
<Parent /> компонент изменится на то, что вы
set государство в
<Child />компонент, используя " props " .. Это может быть что угодно.
Надеюсь, это поможет вам и другим разработчикам в будущем.
В родительском компоненте:
getDatafromChild(val){
console.log(val);
}
render(){
return(<Child sendData={this.getDatafromChild}/>);
}
В дочернем компоненте:
callBackMethod(){
this.props.sendData(value);
}
Простые шаги:
- Создайте компонент с именем Parent.
- В родительском компоненте создайте метод, который принимает некоторые данные и устанавливает принятые данные в качестве состояния родителя.
- Создайте компонент с именем Child.
Передайте метод, созданный в Parent, потомку как
props,Принять реквизит в родительском с помощью
this.propsзатем следует имя метода и передается состояние ребенка в качестве аргумента.- Метод заменит состояние родителя на состояние ребенка.
В React вы можете передавать данные от родителя к потомку, используя реквизиты. Но вам нужен другой механизм для передачи данных от ребенка к родителю.
Другой способ сделать это - создать метод обратного вызова. Вы передаете метод обратного вызова дочернему элементу при его создании.
class Parent extends React.Component {
myCallback = (dataFromChild) => {
//use dataFromChild
},
render() {
return (
<div>
<ComponentA callbackFromParent={this.myCallback}/>
</div>
);
}
}
Вы передаете значение DecisionPage от дочернего элемента к родительскому через метод обратного вызова, который передал родитель.
class ComponentA extends React.Component{
someFn = () => {
this.props.callbackFromParent(decisionPage);
},
render() {
[...]
}
};
SomeFn может быть вашим методом handleClick.
Вот пример того, как мы можем передавать данные от ребенка к родителю (у меня была та же проблема, и использование вышло с этим)
На родителя у меня есть функция (которую я буду вызывать от ребенка с некоторыми данными для него)
handleEdit(event, id){ //Fuction
event.preventDefault();
this.setState({ displayModal: true , responseMessage:'', resId:id, mode:'edit'});
}
dishData = <DishListHtml list={products} onDelete={this.handleDelete} onEdit={(event, id) => this.handleEdit(event, id)}/>;
У дочернего компонента:
<div to="#editItemDetails" data-toggle="modal" onClick={(event)=>this.props.onEdit(event, listElement.id) }
className="btn btn-success">
Просто чтобы прояснить мне ситуацию, но почему вы называете это функцией обратного вызова, обычно функция обратного вызова - это функция, которая принимается в качестве аргумента другой функции (это по определению), и я не вижу особенно, что функция myCallback используется здесь является аргументом другой функции. Пожалуйста, поправьте меня, если я ошибаюсь!
у меня такая же проблема, поэтому я выполнил этот код: в Parentconst PARENT = () => {const [value, setValue] = useState("...."); return ( ) } в дочернем
const CHILD = props => {
return (
<button onClick={() => props.setValue("....")}>
Click to change the state
</button>
)
}
если ваши родительские и дочерние компоненты используют свои данные, есть три способа:
- определите состояние в родительском компоненте и передайте его дочернему элементу, как указано выше.
- используйте контекст и редуктор
- используйте Redux (рекомендуется для сохранения данных и сложных компонентов)
Если ваш родительский компонент является функциональным, теперь вы можете использовать контекстный способ использования. Это включает передачу ссылки на объект и ссылки на метод stateChanging. Это позволит вам изменить состояние из родительского состояния в дочернем, а также изменить это состояние, оставаясь синхронизированным с родительским состоянием. Вы можете узнать больше об этом в видео на YouTube от codedamn под заголовками "React 16.12 Tutorial 20: Intro to Context API" и "React 16.12 Tutorial 21: useContext".
Это работает именно то, что я хотел. Но в случае набора данных, скажем, 50 записей с (customer_id, customer_name) в качестве значений, которые должны быть обновлены от дочернего к родительскому, это отстает. Выполните setState, используя React.useEffect в дочернем компоненте.