reactjs 在react js中编辑表数据

ep6jt1vc  于 2023-04-11  发布在  React
关注(0)|答案(2)|浏览(99)

我在React中有一个表。该表从服务器获取数据。当点击表中的字段时,我需要做一件事。我必须更新信息。
我的table看起来像这样

<div>
        <MDBTable bordered borderColor="primary">
          <MDBTableBody>
            {tableRows.map((row) => (
              <tr
                key={row.id}
                className={selectedRow === row.id ? "selected" : ""}
                onClick={() => handleRowClick(row.id)}
              >
                <th scope="row">{row.id}</th>
                <td>{row.name}</td>
              </tr>
            ))}
          </MDBTableBody>
        </MDBTable>
      </div>

我不需要编辑按钮。我只需要在点击字段时进行编辑。

yhived7q

yhived7q1#

获取输入字段:

<td><input value={row.name} /></td>

最初,将其保持禁用状态,并在onClick事件上更改它。

ippsafx7

ippsafx72#

我解决了我的问题,使用Ant设计库这个代码它的工作时,点击输入字段,我可以更新数据

const {
      createRoot
    } = ReactDOM;
    const {
      Button,
      Form,
      Input,
      Popconfirm,
      Table
    } = antd;
    const {
      useContext,
      useEffect,
      useRef,
      useState
    } = React;;
    const EditableContext = React.createContext(null);
    const EditableRow = ({
      index,
      ...props
    }) => {
      const [form] = Form.useForm();
      return ( <
        Form form = {
          form
        }
        component = {
          false
        } >
        <
        EditableContext.Provider value = {
          form
        } >
        <
        tr { ...props
        }
        /> < /
        EditableContext.Provider > <
        /Form>
      );
    };
    const EditableCell = ({
      title,
      editable,
      children,
      dataIndex,
      record,
      handleSave,
      ...restProps
    }) => {
      const [editing, setEditing] = React.useState(false);
      const inputRef = React.useRef(null);
      const form = React.useContext(EditableContext);
      React.useEffect(() => {
        if (editing) {
          inputRef.current.focus();
        }
      }, [editing]);

      const toggleEdit = () => {
        setEditing(!editing);
        form.setFieldsValue({
          [dataIndex]: record[dataIndex],
        });
      };
      const save = async() => {
        try {
          const values = await form.validateFields();
          toggleEdit();
          handleSave({
            ...record,
            ...values,
          });
        } catch (errInfo) {
          console.log('Save failed:', errInfo);
        }
      };
      let childNode = children;
      if (editable) {
        childNode = editing ? ( <
          Form.Item style = {
            {
              margin: 0,
            }
          }
          name = {
            dataIndex
          }
          rules = {
            [{
              required: true,
              message: `${title} is required.`,
            }, ]
          } >
          <
          Input ref = {
            inputRef
          }
          onPressEnter = {
            save
          }
          onBlur = {
            save
          }
          /> < /
          Form.Item >
        ) : ( <
          div className = "editable-cell-value-wrap"
          style = {
            {
              paddingRight: 24,
            }
          }
          onClick = {
            toggleEdit
          } > {
            children
          } <
          /div>
        );
      }
      return <td { ...restProps
      } > {
        childNode
      } < /td>;
    };
    const App = () => {
      const [dataSource, setDataSource] = React.useState([{
          key: '0',
          name: 'Edward King 0',
          age: '32',
          address: 'London, Park Lane no. 0',
        },
        {
          key: '1',
          name: 'Edward King 1',
          age: '32',
          address: 'London, Park Lane no. 1',
        },
      ]);

      const defaultColumns = [{
          title: 'name',
          dataIndex: 'name',
          width: '30%',
          editable: true,
        },
        {
          title: 'age',
          dataIndex: 'age',
          editable: true,
        },
        {
          title: 'address',
          dataIndex: 'address',
          editable: true,
        },
      ];

      const handleSave = (row) => {
        const newData = [...dataSource];
        const index = newData.findIndex((item) => row.key === item.key);
        const item = newData[index];
        newData.splice(index, 1, {
          ...item,
          ...row,
        });
        setDataSource(newData);
      };
      const components = {
        body: {
          row: EditableRow,
          cell: EditableCell,
        },
      };
      const columns = defaultColumns.map((col) => {
        if (!col.editable) {
          return col;
        }
        return {
          ...col,
          onCell: (record) => ({
            record,
            editable: col.editable,
            dataIndex: col.dataIndex,
            title: col.title,
            handleSave,
          }),
        };
      });
      return ( <
        div >
        <
        Table components = {
          components
        }
        rowClassName = {
          () => 'editable-row'
        }
        bordered dataSource = {
          dataSource
        }
        columns = {
          columns
        }
        /> < /
        div >
      );
    };
    const ComponentDemo = App;

    createRoot(mountNode).render( < ComponentDemo / > );

相关问题