reactjs - 在 React 中更新表

Question

看到了一些问题，但仍然不知道该怎么做。也有新的 react 。我想使用输入字段更新包含“标题”和“金额”值的表。我很确定我必须将状态设置为空白表，然后在更新时更新状态。每次添加 2 个新值时，如何用新行更新表？

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

const table =
<table id="itemTable">
  <tbody>
  <tr><th>Title</th>
  <th>Amount</th>
  <th>Remove Item</th>
  </tr>
  </tbody>
</table>;

class App extends Component {
constructor(props){
  super(props);
  this.state = {
      title: '',
      amount: '',
      table: {table}
  };

    this.handleChange = this.handleChange.bind(this);
    this.handleClick = this.handleClick.bind(this);
}

    handleClick() {
//adds to table

    }

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

    render() {
    return (
      <section className="App">
          <header>
              <h1>Money Manager</h1>
          </header>

        <section>
          <h1>Finances</h1>
          <form>
              <label htmlFor="name">Name</label>
            <input type="text" name="title" onChange={this.handleChange}/>

              <label htmlFor="amount">Amount</label>
              <input type="text" name="amount" onChange={this.handleChange}/>

            <button type="button" id="add" onClick={this.handleClick}>Add item</button>
          </form>

          <section>
            <h1>Items</h1>
              {table}
          </section>
        </section>
      </section>

    );
  }
}

export default App

Answer 1

您应该制作表格的前面，并为表格的内容制作一个状态，如下所示:

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

class App extends Component {
    constructor(props){
      super(props);
      this.state = {
          tableContent: []
      };

        this.handleChange = this.handleChange.bind(this);
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
      // Don't forget to check if the inputs are corrects

      // Here i generate a random number for the key propriety that react need
      let randomID = Math.floor(Math.random() * 999999);

      // recreate a new object and stock the new line in
      let newTab = this.state.tableContent;
      newTab.push({
        key: randomID,
        title: "",
        amount: "" // Don't forget to get the value of the inputs here
      });

      this.setState({
        tableContent: newTab 
      });

      // Clear the content of the inputs

      // the state has changed, so the tab is updated.
    }

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

    render() {
    return (
      <section className="App">
          <header>
              <h1>Money Manager</h1>
          </header>

        <section>
          <h1>Finances</h1>
          <form>
              <label htmlFor="name">Name</label>
            <input type="text" name="title" onChange={this.handleChange}/>

              <label htmlFor="amount">Amount</label>
              <input type="text" name="amount" onChange={this.handleChange}/>

            <button type="button" id="add" onClick={this.handleClick}>Add item</button>
          </form>

          <section>
            <h1>Items</h1>
            <table id="itemTable">
              <thead>
                <tr>
                  <th>Title</th>
                  <th>Amount</th>
                  <th>Remove Item</th>
                </tr>
              </thead>
              <tbody>
                {this.state.tableContent.map((item) => 
                  <tr key={item.key}>
                    <td>{item.title}</td>
                    <td>{item.amount}</td>
                    <td>
                      {/* Here add the onClick for the action "remove it" on the span */}
                      <span>Remove it</span>
                    </td>
                    <td></td>
                  </tr>
                )}
              </tbody>
            </table>
          </section>
        </section>
      </section>
    );
  }
}

export default App

尚未完成，但我已经评论了你应该做什么以及我已经做了什么。