ReactJS技术问题：如何通过表单输入值向表格添加新行？

我来帮你搞定这个需求！你目前的代码还缺少状态管理和组件间数据传递的核心逻辑，而且在React里几乎不用组件继承的方式来复用代码，咱们一步步调整代码实现功能：

1. 先理清组件职责（重构结构） #

• App 作为父组件：负责管理用户数据的状态，提供添加用户的方法
• Form 作为子组件：负责收集用户输入，提交时通知父组件添加新数据
• Table 作为子组件：负责接收父组件传递的用户数据，渲染表格内容

2. 修改 App.js（核心状态管理） #

这里我们添加users状态存储用户列表，添加handleAddUser方法处理表单提交的新用户：

import React, { Component } from 'react';
import logo from './logo.svg';
import Table from './Table.js';
import Form from './Form.js';
import './App.css';

class App extends Component {
  // 初始化用户列表状态
  state = {
    users: []
  };

  // 处理添加用户的方法，接收从Form传过来的新用户数据
  handleAddUser = (newUser) => {
    this.setState(prevState => ({
      users: [...prevState.users, newUser]
    }));
  };

  render() {
    return (
      <div className="App">
        {/* 把添加用户的方法传给Form */}
        <Form onAddUser={this.handleAddUser} />
        {/* 把用户列表传给Table */}
        <Table users={this.state.users} />
      </div>
    );
  }
}

export default App;

3. 修改 Form.js（受控组件+提交逻辑） #

把输入框改成受控组件（用state绑定输入值），实现表单提交逻辑，提交后通知父组件：

import React, { Component } from 'react';
import './form.css';

export default class Form extends Component {
  // 初始化输入框状态
  state = {
    username: '',
    password: ''
  };

  // 处理输入框内容变化
  handleInputChange = (e) => {
    const { name, value } = e.target;
    this.setState({ [name]: value });
  };

  // 处理表单提交
  handleSubmit = (e) => {
    e.preventDefault(); // 阻止默认的表单提交行为
    // 验证输入不为空
    if (this.state.username.trim() && this.state.password.trim()) {
      // 把新用户数据传给父组件的方法
      this.props.onAddUser({
        username: this.state.username,
        password: this.state.password
      });
      // 清空输入框
      this.setState({ username: '', password: '' });
    }
  };

  render(){
    return(
      <div id="Form">
        <form onSubmit={this.handleSubmit}>
          Username<br/>
          <input 
            type="text" 
            name="username" 
            placeholder="Username" 
            value={this.state.username}
            onChange={this.handleInputChange}
          /><br/>
          Password<br/>
          <input 
            type="password" 
            name="password" 
            placeholder="Password"
            value={this.state.password}
            onChange={this.handleInputChange}
          /><br/>
          <br/>
          <input type="submit" value="Submit" />
        </form>
      </div>
    );
  }
}

4. 修改 Table.js（接收数据动态渲染） #

去掉不必要的继承，接收父组件传过来的users数组，动态渲染每一行：

import React, { Component } from 'react';
import './table.css';

export default class Table extends Component {
  render(){
    const { users } = this.props;
    return(
      <div id="Table">
        <table>
          <tr>
            <th>Username</th>
            <th>Password</th>
          </tr>
          {/* 动态渲染用户列表 */}
          {users.map((user, index) => (
            <tr key={index}>
              <td>{user.username}</td>
              <td>{user.password}</td>
            </tr>
          ))}
        </table>
      </div>
    );
  }
}

关键知识点说明 #

• 受控组件：输入框的值和组件state绑定，这样能精准控制输入内容，也方便提交时获取数据
• 组件通信：父组件通过props把方法传给子组件（Form），子组件触发方法传递数据；父组件把数据通过props传给另一个子组件（Table）实现渲染
• 组合优于继承：React官方推荐用组件组合的方式复用代码，而不是类继承，这样组件职责更清晰，也更灵活

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