在reactjs中添加项后不刷新即可更新表

在React.js中，可以通过使用状态管理来实现在添加项后不刷新即可更新表的效果。以下是一种常见的实现方式：

首先，创建一个父组件，用于管理表格的数据和状态。

import React, { useState } from 'react';

function Table() {
  const [items, setItems] = useState([]);

  const addItem = (newItem) => {
    setItems([...items, newItem]);
  };

  return (
    <div>
      <AddItemForm addItem={addItem} />
      <ItemList items={items} />
    </div>
  );
}

export default Table;

创建一个子组件，用于展示表格中的项。

import React from 'react';

function ItemList({ items }) {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

export default ItemList;

创建一个子组件，用于添加新的项。

import React, { useState } from 'react';

function AddItemForm({ addItem }) {
  const [inputValue, setInputValue] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    addItem(inputValue);
    setInputValue('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <button type="submit">Add Item</button>
    </form>
  );
}

export default AddItemForm;

在上述代码中，父组件Table通过useState钩子来管理表格的数据items，并通过addItem函数来更新数据。子组件ItemList负责展示表格中的项，通过map函数遍历items数组生成列表项。子组件AddItemForm负责添加新的项，通过useState钩子来管理输入框的值inputValue，并在提交表单时调用addItem函数将新的项添加到items数组中。