reactjs 子组件onClick 触发父组件定义的方法

最新推荐文章于 2025-02-22 09:53:25 发布

Julie_GO

最新推荐文章于 2025-02-22 09:53:25 发布

阅读量3.2k

点赞数

本文链接：https://blog.youkuaiyun.com/z2181745/article/details/97276127

版权

本文介绍了一个React应用中父组件如何向子组件传递状态并触发更新的实例。通过使用bind方法绑定deleteItem函数，父组件可以修改其状态，进而更新子组件显示的数据。子组件通过props接收数据和回调函数，实现列表项的动态删除。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如题

父组件

class Parent extends Component {
    constructor(props) {
        super(props)
        this.state = {
            list:['a','b','c','d']
        }
        this.deleteItem = this.deleteItem.bind(this)
    }
     deleteItem(index) {
        const newState = this.state.list(index,1);
        this.setState({list:newState})
    }
    render(){
        return(
            <Child
            list={this.state.list}
            deleteItem={this.deleteItem}
            />
        )
    }
}
export default Parent;

子组件

class Child extends Component {
    render(){
        return(
             <List
            bordered
            dataSource={this.props.list}
            renderItem={(item, index) => (
              <List.Item onClick={()=>{this.props.deleteItem(index)}}>{item}</List.Item>
            )}
          />
        )
    }
}
export default Child;