[英]Pass props from child component to parent on select option change
I have a select dropdown Component as a Child component where the options(list of category) are generated by API on componentDidMount
in the parent Component.我有一个选择下拉组件作为子组件,其中选项(类别列表)由父组件中
componentDidMount
上的 API 生成。 When the user selects the option (category), a selected value must be passed back to the parent component.The parent Component performs the get request based on the value selected and passes the result as options (list of products) to another child component having a select dropdown.当用户选择选项(类别)时,必须将选定的值传递回父组件。父组件根据选定的值执行获取请求,并将结果作为选项(产品列表)传递给另一个具有一个选择下拉菜单。
I want to keep these child components as stateless function as it can be used in multiple components.我想将这些子组件保留为无状态功能,因为它可以在多个组件中使用。
So, the list of categories is passed as props in the select dropdown ----developer tools:因此,类别列表在选择下拉列表----开发者工具中作为道具传递:
but not on the webpage.但不是在网页上。
Parent Container父容器
categories() {
return this.props.category && this.props.category.map((category) =>
<option key={category.id} value={category.name} className="textTransform">
{category.name.charAt(0).toUpperCase() + category.name.slice(1)}
</option>
)
}
onChangeOption(e){
if (e.detail === 0){
// console.log(e.target.value);
this.props.productLoad(e.target.value);
}
}
in the render function of parent component在父组件的渲染函数中
<SelectCategory
changeOption={this.onChangeOption}
fetchCategory={this.categories()}
/>
Child Component(SelectCategory)子组件(SelectCategory)
import React from 'react'
import { Field,reduxForm } from 'redux-form';
const SelectCategory = (changeOption,fetchCategory) => (
<div className="col-sm-3 col-md-3 col-lg-3 ">
<div className="form-group">
<Field
name="selectCategory"
component="select"
className="form-control"
onClick={changeOption()}
>
<option value="0" disabled>Select Category</option>
{ fetchCategory() }
</Field>
</div>
</div>
)
export default SelectCategory
The child component won't update because you are not updating any of its props:子组件不会更新,因为您没有更新它的任何道具:
You should create an additional prop in the child component, called "selectedOption" and pass that from the parent component.您应该在子组件中创建一个额外的道具,称为“selectedOption”并从父组件传递它。 Hence, this prop will change and the child component will update.
因此,这个 prop 会改变并且子组件会更新。
Hope this helps.希望这会有所帮助。 Apologies if I misunderstood the issue!
如果我误解了这个问题,请道歉!
I got it worked by using the callback in the parent function我通过在父函数中使用回调来实现它
myCallback = (selectedCategory) => {
this.props.productLoad(selectedCategory);
}
And the callback is passed to the child component as props并且回调作为道具传递给子组件
<SelectCategory
Categories={this.props.category}
callbackFromParent={this.myCallback}
/>
Therefore,in the child component ,on event trigger i called the function onchangeOption
which in turn passes the selected value to the callback present in the parent component.因此,在子组件中,在事件触发器中,我调用了函数
onchangeOption
,该函数又将选定的值传递给父组件中存在的回调。
onChangeOption=(e)=>{
if (e.detail === 0){
this.props.callbackFromParent(e.target.value);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.