Question

我正在学习ReactJS。

我想在输入字段中添加文本，然后单击提交按钮。这个新值将添加到表中。

我开始使用一个简单的表单组件，它具有输入值名字和姓氏。扩展表单的表组件。表单已添加到默认的App类中。

Form.js

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

export default class Form extends Component {


  render(){
      return(
        <div id="Form">

          <form onSubmit={this.handleSubmit}>
              Username<br/>
              <input type="text" name="username" placeholder="Username" /><br/>
              Password<br/>
              <input type="password" name="password" placeholder="Password"/><br/>
              <br/>
              <input type="submit" value="Submit" />
          </form>
        </div>
      );
    }

}

Table.js

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

export default class Table extends Form {
  render(){
      return(
        <div id="Table">
          <table>
            <tr>
              <th>Username</th>
              <th>Password</th>
            </tr>
            <tr>
              <td>a</td>
              <td></td>
            </tr>

          </table>
        </div>
      );
    }

}

App.js

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 {
  render() {
    return (
      <div className="App">
        <Form />
      </div>
    );
  }
}

export default App;

Answer 1

我做了CodePen with a working example.

<强>解释

您必须在父组件上编写方法，并将其作为道具传递给子组件。您的应用程序的状态将也可以在父组件上。

您应该创建的方法是handleInputChange和handleFormSubmit。您必须将两个方法作为道具传递给Form组件。

状态将为新项目提供“用户名”和“密码”，以及现有项目的数组以及新项目的添加位置。您将把项目数组作为道具传递给Table组件。

在Table组件中，只需映射项目prop并打印<tr>，其中包含数组中每个项目的数据。

./ App.js

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

class App extends Component {
  constructor() {
    super();

    this.state = {
      username: '',
      password: '',
      items: []
    }
  };

  handleFormSubmit = (e) => {
    e.preventDefault();

    let items = [...this.state.items];

    items.push({
      username: this.state.username,
      password: this.state.password
    });

    this.setState({
      items,
      username: '',
      password: ''
    });
  };

  handleInputChange = (e) => {
    let input = e.target;
    let name = e.target.name;
    let value = input.value;

    this.setState({
      [name]: value
    })
  };

  render() {
    return (
      <div className="App">
        <Table items={ this.state.items }/>
        <Form handleFormSubmit={ this.handleFormSubmit } 
          handleInputChange={ this.handleInputChange }
          newUsername={ this.state.username }
          newPassword={ this.state.password } />
      </div>
    );
  }
}

export default App;

./ Form.js

import React, { Component } from 'react';

class Form extends React.Component {
  render() {
    return (
      <div id="Form">
        <h3>Add a new item to the table:</h3>  
        <form onSubmit={this.props.handleFormSubmit}>
          <label htmlFor="username">
          Username:
          <input id="username" value={this.props.newUsername} 
            type="text" name="username"
            onChange={this.props.handleInputChange} />
          </label>
          <label for="password">
          Password:
          <input id="password" value={this.props.newPassword} 
            type="password" name="password"
            onChange={this.props.handleInputChange} />
          </label>
          <button type="submit" value="Submit">Add Item</button>
        </form>
      </div>
    );
  }
}

export default Form;

./ Table.js

import React, { Component } from 'react';

class Table extends React.Component {
  render() {
    const items = this.props.items;
    return (
      <div id="Table">
        <table>
          <tbody>
            <tr>
              <th>Username</th>
              <th>Password</th>
            </tr>
            {items.map(item => {
              return (
                <tr>
                  <td>{item.username}</td>
                  <td>{item.password}</td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    );
  }
}

export default Table;

我建议您阅读React文档的Controlled Components部分。

对于更复杂的表单案例，您可以使用Redux和redux-form。

我希望这会有所帮助。

Answer 2

你可以在下面这样做。将输入字段值存储到数组状态，并将其作为props传递给Table组件。在你的Table组件中取一个数组变量并迭代你的formData props，然后将用户名和密码推送到rows数组并打印出来。

您可以在下面查看全部功能

Form.js

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

export default class Form extends Component {
    constructor(props){
    super(props);
    this.state = {
    uName: '',
    uPassword: '',
    formValid: false,
    formData: []
}
    this.changeUsername = this.changeUsername.bind(this);
    this.changePassword = this.changePassword.bind(this);
}

changeUsername(event){
   this.setState({
      uName: event.target.value
   })
}

changePassword(event){
    this.setState({
      uPassword: event.target.value
    })
}

handleSubmit(e){
     e.preventDefault();
     if(this.state.uName != "" && this.state.uPassword != "" && this.state.uName != null && this.state.uPassword != null){
         let object = {}
         object.username = this.state.uName;
         object.password = this.state.uPassword;

         this.setState({
            formValid: true,
            formData: obj
          })

     }
}

renderTable(){
     <Table formData = {this.state.formData} />
}

  render(){
      return(
        <div id="Form">

          <form onSubmit={this.handleSubmit}>
              Username<br/>
              <input type="text" value = {this.state.uName} name="username" placeholder="Username" onChange={this.changeUsername}/><br/>
              Password<br/>
              <input type="password" value = {this.state.uPassword} name="password" placeholder="Password" onChange={this.changePassword}/><br/>
              <br/>
              <input type="submit" value="Submit" />
          </form>
{this.state.formValid ? this.renderTable() : ''}
        </div>
      );
    }

}

Table.js

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

export default class Table extends Form {
constructor(props){
    super(props);

}
  render(){
     const {formData} = this.props;
     let rows = []
     if(formData){
       for(var i=0; i<formData.length;i++){
        rows.push(<tr><td>{formData[i].username}</td><td>{formData[i].password}</td></tr>)
        }  
      }
      return(
        <div id="Table">
          <table>
            <tr>
              <th>Username</th>
              <th>Password</th>
            </tr>
            {rows}

          </table>
        </div>
      );
    }
   }

ReactJS：如何从Form输入值向表中添加新行？

2 个答案: