React待办清单：如何将Type组件表单数据传递给ListTable组件？

嗨，我来帮你优化这个组件间数据更新的问题～你现在用表格里的刷新按钮去调用表单的提交方法，确实有点绕，而且用户体验也不够流畅——明明提交了表单，还要手动点刷新才能看到新数据，咱们可以用状态提升的思路来解决，让表单提交后表格自动更新。

核心思路：把共享状态提到父组件 #

React的单向数据流里，组件间共享数据的最佳实践是把状态放在它们共同的父组件中，然后通过props把数据和更新方法传递给子组件。具体到你的场景：

• 父组件管理待办列表的状态（比如todos数组）
• Type组件（表单）负责收集用户输入，提交时调用父组件的方法把新待办数据传过去
• ListTable组件直接接收父组件传来的todos作为props，自动渲染最新数据

具体实现步骤 #

1. 创建父组件（比如TodoApp）
   把待办列表的状态和添加待办的方法放在这里：

   class TodoApp extends React.Component {
     constructor(props) {
       super(props);
       this.state = {
         todos: [] // 存放所有待办数据
       };
       this.handleAddTodo = this.handleAddTodo.bind(this);
     }
   
     handleAddTodo(newTodo) {
       // 更新待办列表，把新数据加进去
       this.setState(prevState => ({
         todos: [...prevState.todos, newTodo]
       }));
     }
   
     render() {
       return (
         <div>
           {/* 把添加方法传给Type组件 */}
           <Type onAddTodo={this.handleAddTodo} />
           {/* 把待办列表传给ListTable组件 */}
           <ListTable todos={this.state.todos} />
         </div>
       );
     }
   }
   

2. 修改Type组件
   去掉自身管理的待办数据状态（如果有的话），表单提交时调用父组件传来的onAddTodo方法：

   class Type extends React.Component {
     constructor(props) {
       super(props);
       this.state = {
         // 只管理表单输入的临时状态
         name: '',
         age: ''
         // 其他表单字段...
       };
       this.handleChange = this.handleChange.bind(this);
       this.handleSubmit = this.handleSubmit.bind(this);
     }
   
     handleChange(e) {
       const { name, value } = e.target;
       this.setState({ [name]: value });
     }
   
     handleSubmit(e) {
       e.preventDefault();
       // 把表单数据整理成待办对象
       const newTodo = { ...this.state };
       // 调用父组件的方法添加待办
       this.props.onAddTodo(newTodo);
       // 清空表单
       this.setState({ name: '', age: '' });
     }
   
     render() {
       return (
         <form onSubmit={this.handleSubmit}>
           <input
             type="text"
             name="name"
             value={this.state.name}
             onChange={this.handleChange}
             placeholder="姓名"
           />
           <input
             type="number"
             name="age"
             value={this.state.age}
             onChange={this.handleChange}
             placeholder="年龄"
           />
           {/* 其他表单字段... */}
           <button type="submit">添加待办</button>
         </form>
       );
     }
   }
   

3. 修改ListTable组件
   直接使用父组件传来的todosprops渲染，去掉原来的refresh按钮和调用Type组件方法的逻辑：

   class ListTable extends React.Component {
     render() {
       const { todos } = this.props;
       return (
         <table>
           <thead>
             <tr>
               <th>姓名</th>
               <th>年龄</th>
               {/* 其他表头... */}
             </tr>
           </thead>
           <tbody>
             {todos.map((todo, index) => (
               <tr key={index}>
                 <td>{todo.name}</td>
                 <td>{todo.age}</td>
                 {/* 其他单元格... */}
               </tr>
             ))}
           </tbody>
         </table>
       );
     }
   }
   

为什么这样更好？ #

• 符合React单向数据流：数据从父组件流向子组件，更新逻辑统一在父组件，避免组件间的反向调用，代码更清晰
• 自动更新：表单提交后，父组件状态更新，ListTable会自动接收到新的props并重新渲染，不需要手动点击刷新
• 职责分离：Type只负责收集用户输入和提交，ListTable只负责展示数据，每个组件的职责更单一，后期维护更方便

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