Question

我正在制作一个应用程序，其中在一个页面上有一个表，并且我需要在单击按钮时从另一个页面向该表添加一行。我的页面正在使用reactstrap和reactjs，我已经导出了所有页面，并且可以单击按钮来呈现它们。

表格页面的前部：文件名table.js

class table extends Component {
  render() {
    return (
            <table>
            <thead>
              <tr>
                <th>row1</th>
                <th>row2</th>
                <th>row3</th>
                <th>row4</th>
                <th>row5</th>
              </tr>
            </thead>

            <tbody>
                <tr>
                  <td scope="row">1</td>
                  <td>text</td>
                  <td>text</td>
                  <td>text</td>
                  <td>text</td>
                </tr>
            </tbody>
)
};
export default table;

我需要此页面的代码，例如-example.js

class addRow extends Component {
  I need the function that will add a row to table.js on button click

   render() {
     return(
        <Button>this button will add a row to table.js</Button>
     )
   };
 }
 export default addRow;

在此页面上，我需要将代码放在table.js页面上的行中。本质上，它将从example.js到table.js向表中添加一行

有人可以联系我或解释我该怎么做吗？

Answer 1

如果AddRow是Table的子组件，那么您可以像下面这样将方法作为prop向下传递：

class Table extends Component {
    addRow = () => {
        // code to add row to table
    }
    render() {
        return (
            <table> ... </table>
            <AddRow addRow={this.addRow}/>
        )
    };
}

class AddRow extends Component {
    render() {
        return (
            <button onClick={this.props.addRow}>Add Row</button>
        )
    }
}

Answer 2

似乎您正在尝试像对待静态数据那样处理数据，而这错过了React在这里要做的工作：根据您的状态动态呈现组件。

因此，我将获取表数据作为状态，然后只要想添加新行就修改该状态。方法如下：

class Table extends React.Component {
  state = {
    // this is your table represented as a 2D array
    table: [
      ["row1", "row2", "row3", "row4", "row5"],
      [1, "text", "text", "text", "text"],
      [2, "text", "text", "text", "text"],
    ]
  }

  addRow = row => {
    const table = this.state.table.slice()
    table.push(row)
    this.setState({ table })
  }

  render() {
    const headers = this.state.table.slice(0, 1)[0]
    const rows = this.state.table.slice(1)

    return (
      <div>
        <table>
          // your headers are rendered here
          <TableHeaders headers={headers} />
          <tbody>
            {
              // each row will be dynamically rendered here
              rows.map(row => <TableRow row={row}/>)
            }
          </tbody>
        </table>
        // this button is passed down a method that can add rows
        <AddRowButton addRow={this.addRow} />
      </div>
    )
  }
}

const TableHeaders = ({ headers }) =>
  <thead>
    <tr>
      { headers.map(header => <th>{ header }</th>) }
    </tr>
  </thead>

const TableRow = ({ row }) =>
  <tr>
    { row.map(cell => <td>{cell}</td>) }
  </tr>

const AddRowButton = ({ addRow }) =>
  <button onClick={() => addRow(['test','test','test','test','test'])}>
    ADD ROW
  </button>


ReactDOM.render(<Table />, document.querySelector('#root'))

在这里您可以找到我刚才在CodePen上制作的一个有效示例： https://codepen.io/NMarcora/pen/ajpPEo

可以使事情变得更清洁并进一步提取，但我希望您能理解。

ReactJs如何从其他页面向表中添加行

2 个答案: