React中如何在Create组件提交后调用List组件的handleSubmit方法？

针对你的需求，这里提供几种符合React组件通信原则的实现方案，按推荐程度排序：

方案一：状态提升到父组件（最推荐） #

将列表数据的管理逻辑移到List和Create的共同父组件中，让父组件统一处理数据获取和更新，组件间通过props传递方法和数据，符合React单向数据流的设计思想。

步骤及代码修改： #

1. 父组件（如App.js）：
   负责管理列表状态，实现获取列表的方法，同时传递给子组件：

   import React, { Component } from 'react';
   import List from './LIST';
   import Create from './CREATE';
   import axios from 'axios';
   
   export default class App extends Component {
     constructor(props) {
       super(props);
       this.state = {
         totalCount: '',
         totalItems: '',
       };
     }
   
     // 封装获取列表的方法
     fetchList = async () => {
       const response = await axios.get(
         'https://*****.execute-api.us-east-1.amazonaws.com/apiCall***',
       );
       this.setState({
         totalCount: "Total Item: " + response.data.Count,
         totalItems: JSON.stringify(response.data.Items, null, 2)
       });
     }
   
     // 组件挂载时初始加载列表
     componentDidMount() {
       this.fetchList();
     }
   
     render() {
       return (
         <div>
           {/* 给Create传递创建成功后的回调 */}
           <Create onCreateSuccess={this.fetchList} />
           {/* 给List传递数据和刷新方法 */}
           <List 
             totalCount={this.state.totalCount} 
             totalItems={this.state.totalItems}
             fetchList={this.fetchList}
           />
         </div>
       );
     }
   }
   

2. 修改List组件：
   不再自行管理状态，通过props接收数据和刷新方法：

   // LIST.js
   export default class List extends Component {
     constructor(props) {
       super(props);
       this.handleSubmit = this.handleSubmit.bind(this);
     }
   
     async handleSubmit(event) {
       event.preventDefault();
       this.props.fetchList();
     }
   
     render() {
       return (
           <>
           <form onSubmit={this.handleSubmit}>
             <div className="col col-lg-2">
                 <button type="submit" className="btn btn-outline-secondary">List</button>
             </div>
           </form>
           <br /><br /><div className=""><b>{this.props.totalCount}</b></div>
           <div className=""><b><pre>{this.props.totalItems}</pre></b></div>
           </>
       );
     }
   }
   

3. 修改Create组件：
   创建成功后调用父组件传递的回调：

   // CREATE.js 修改handleSubmit方法
   async handleSubmit(event) {
     event.preventDefault();
     const { message } = this.state;
     await axios.post(
       'https://*****.execute-api.us-east-1.amazonaws.com/default/apiCall***',
       { create: `${message}` },
     ).then((response)=>{
       this.setState({
         message: ""
       });
       // 触发父组件的列表刷新方法
       this.props.onCreateSuccess();
     });
   }
   

方案二：通过Ref调用子组件方法 #

如果不想改动状态管理逻辑，可以通过父组件的Ref获取List实例，再传递回调给Create，触发List的刷新方法。

步骤及代码修改： #

1. 父组件（App.js）：

   import React, { Component } from 'react';
   import List from './LIST';
   import Create from './CREATE';
   
   export default class App extends Component {
     constructor(props) {
       super(props);
       // 创建List组件的Ref
       this.listRef = React.createRef();
     }
   
     // 创建成功后调用List的handleSubmit
     handleCreateSuccess = () => {
       // 传入空的event对象，因为原方法需要preventDefault
       this.listRef.current.handleSubmit({ preventDefault: () => {} });
     }
   
     render() {
       return (
         <div>
           <Create onCreateSuccess={this.handleCreateSuccess} />
           <List ref={this.listRef} />
         </div>
       );
     }
   }
   

2. 修改Create组件：
   和方案一相同，在创建成功后调用this.props.onCreateSuccess()即可。

方案三：事件总线（快速实现，不推荐复杂场景） #

通过自定义事件总线实现组件间通信，适合简单场景，但不利于大型项目的维护。

步骤及代码修改： #

1. 创建事件总线文件（eventBus.js）：

   import { EventEmitter } from 'events';
   export default new EventEmitter();
   

2. 修改List组件：
   监听刷新事件，触发自身的handleSubmit：

   // LIST.js
   import eventBus from './eventBus';
   
   export default class List extends Component {
     constructor(props) {
       super(props);
       this.state = {
         totalCount: '',
         totalItems: '',
       };
       this.handleSubmit = this.handleSubmit.bind(this);
     }
   
     componentDidMount() {
       // 监听刷新列表事件
       this.refreshListener = eventBus.on('refreshList', () => {
         this.handleSubmit({ preventDefault: () => {} });
       });
     }
   
     componentWillUnmount() {
       // 移除监听，避免内存泄漏
       eventBus.removeListener('refreshList', this.refreshListener);
     }
   
     // 原handleSubmit方法不变
     async handleSubmit(event) {
       event.preventDefault();
       await axios.get(
         'https://*****.execute-api.us-east-1.amazonaws.com/apiCall***',
       ).then((response)=>{
         this.setState({
           totalCount: "Total Item: " + response.data.Count,
           totalItems: JSON.stringify(response.data.Items, null, 2)
         })
       });
     }
   
     // 原render方法不变
   }
   

3. 修改Create组件：
   创建成功后触发刷新事件：

   // CREATE.js
   import eventBus from './eventBus';
   
   // 原代码不变，修改handleSubmit方法
   async handleSubmit(event) {
     event.preventDefault();
     const { message } = this.state;
     await axios.post(
       'https://*****.execute-api.us-east-1.amazonaws.com/default/apiCall***',
       { create: `${message}` },
     ).then((response)=>{
       this.setState({
         message: ""
       });
       // 触发刷新列表事件
       eventBus.emit('refreshList');
     });
   }
   

方案选择建议 #

• 优先选方案一：状态提升是React官方推荐的组件通信方式，组件职责清晰，代码可维护性高。
• 如果不想改动现有状态逻辑，可选方案二，但要注意Ref的使用场景，避免过度依赖。
• 方案三仅适合小型项目或快速原型，复杂项目中容易出现事件管理混乱的问题。

内容的提问来源于stack exchange，提问作者Jay