react 如何修改父组件传过来的值
时间: 2023-09-22 16:10:13 浏览: 51
要修改父组件传过来的值,可以在子组件中通过回调函数来实现。在父组件中定义一个修改状态的方法,并将该方法作为属性传递给子组件。子组件在需要修改父组件传过来的值时,调用该回调函数即可。
在给子组件传递回调函数时,需要注意将父组件中的`this`绑定到回调函数中,以确保在子组件中可以访问到父组件的状态和方法。
在这个例子中,父组件`Filter`定义了`onTitleClick`方法来处理子组件`FilterTitle`传递过来的点击事件。在`FilterTitle`组件中,当用户点击标题时,调用`onClick`属性传递的回调函数,并将点击的类型作为参数传递给该函数。
通过这种方式,子组件就可以修改父组件的状态或执行父组件的逻辑操作,实现父子组件之间的数据传递和交互。
可以参考以下代码:
```jsx
// 父组件 Filter
export default class Filter extends Component {
state = {
titleSelectedStatus: {
area: false,
mode: false,
price: false,
more: false,
},
};
onTitleClick = (type) => {
// 修改父组件的状态
this.setState((prevState) => ({
titleSelectedStatus: {
...prevState.titleSelectedStatus,
[type]: !prevState.titleSelectedStatus[type],
},
}));
};
render() {
const { titleSelectedStatus } = this.state;
return (
<div className={styles.root}>
<div className={styles.content}>
<FilterTitle
titleSelectedStatus={titleSelectedStatus}
onClick={this.onTitleClick}
/>
{/* 其他内容 */}
</div>
</div>
);
}
}
```
```jsx
// 子组件 FilterTitle
export default function FilterTitle({ titleSelectedStatus, onClick }) {
return (
<Flex align="center" className={styles.root}>
{titleList.map((item) => {
const isSelected = titleSelectedStatus[item.type];
return (
<Flex.Item key={item.type} onClick={() => onClick(item.type)}>
<span
className={[styles.dropdown, isSelected ? styles.selected : ""].join(" ")}
>
<span>{item.title}</span>
<i className="iconfont icon-arrow" />
</span>
</Flex.Item>
);
})}
</Flex>
);
}
```
在上述代码中,当用户点击子组件`FilterTitle`中的标题时,会调用父组件`Filter`传递的`onClick`回调函数,并将点击的类型`item.type`作为参数传递给该函数。在父组件的`onTitleClick`方法中,根据传递的类型来修改父组件的状态`titleSelectedStatus`,实现了父组件传递值给子组件并修改的功能。<span class="em">1</span><span class="em">2</span>
#### 引用[.reference_title]
- *1* *2* [react--子组件更改父组件的值(状态)](https://blog.csdn.net/weixin_43131046/article/details/120849530)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]