reactjs - 使用诸如“输入”之类的按键添加新行

Question

我想在反应时从材料表中添加一个带有“输入”键的关键监听器到“onRowAdd”操作，

是否可以在表格道具之外调用该函数并添加一个普通的 js 侦听器来按键输入以启动该函数？

所以我搜索了材料表的文档，没有类似的东西可以帮助我，有人知道我该如何解决吗？

谢谢

import React, { useEffect, useState } from 'react'
import MaterialTable from 'material-table'
import axios from 'axios'
var emitter = require('../config/global_emitter')

export default function MaterialTableDemo(props) {
  const [state, setState] = useState({
    columns: [
      { title: 'Item', field: 'item' },
      { title: 'Quantity', field: 'quantity', type: 'numeric' },
      { title: 'Description', field: 'description' },
      { title: 'Price', field: 'price', type: 'numeric' },
      {
        title: 'Location',
        field: 'location',
        lookup: { 34: 'Batman', 63: 'Back Store' },
      },
    ],
    data: []
  });

  useEffect(() => {
    setState({...state, data:[]})
      const user = {
          name: props.userSelected
      }
    axios.post('api', user)
    .then(e => {
        if (e.data !== ''){
          setState({...state, data: e.data})
        }
    })
  },[props.userSelected])

  const handleUpdate = (data) => {
    const upload = {
      items: data,
      name: props.userSelected
    }
    axios.post('api', upload)
    .then((e) => {
      if (e.status === 200){
        emitter.emit('confirmMessage', 'Updated list correctly')
      }
    })
  }

  return (
    <MaterialTable
      title={props.userSelected + '´s items ordered'}
      columns={state.columns}
      data={state.data}
      options={{
        headerStyle: {
          backgroundColor: '#01579b',
          color: '#FFF'
        },
        rowStyle: {
          opacity: 1,
          animationName: 'fadeInOpacity',
          animationIterationCount: 1,
          animationTimingFunction: 'ease-in',
          animationDuration: '2s'
        }
      }}
      onKeyDown={(ev) => {
        console.log(`Pressed keyCode ${ev.key}`);
        if (ev.key === 'Enter') {
          // Do code here
          ev.preventDefault();
        }
      }}
      editable={{
        onRowAdd: newData =>
          new Promise(resolve => {
            setTimeout(() => {
              resolve();
              addRow(newData)
            }, 600);
          }),
          onRowUpdate: (newData, oldData) =>
          new Promise(resolve => {
            setTimeout(() => {
              resolve();
              const data = [...state.data];
              data[data.indexOf(oldData)] = newData;
              handleUpdate(data)
              setState({ ...state, data });
            }, 600);
          }),
        onRowDelete: oldData =>
          new Promise(resolve => {
            setTimeout(() => {
              resolve();
              const data = [...state.data];
              data.splice(data.indexOf(oldData), 1);
              handleUpdate(data)
              setState({ ...state, data });
            }, 600);
          }),
      }}
    />
  );
}