通过单击编辑按钮编辑表格单元格值 - React

Posted

技术标签:

【中文标题】通过单击编辑按钮编辑表格单元格值 - React【英文标题】:Edit table cell value by clicking on edit button - React 【发布时间】:2021-01-03 23:03:12 【问题描述】:

我想在 react 中实现以下功能。我该怎么做?

请参考图片。

将表格单元格变为输入框

表格中的可编辑单元格

【问题讨论】:

【参考方案1】:

你可以这样做:

const ConditionalField = (
  value, mode, onChange,
  editValue,
) => 
  let cmp;
  switch(mode) 
    case 'edit':
    cmp = <input
      placeholder="First Name"
      value=editValue
      onChange=onChange
    />
    break;
    case 'view':
      cmp = <p>value</p>
    break;
    default:
  
  return cmp


const ShowHide = React.memo((show, children) => show && children)

function App(
  onClickCancel, onClickEdit, onClickSave,
  mode, value, editValue, onChange,
  isSaveAndCancelDisabled, isEditDisabled
) 
  return (
    <table>
      <tbody>
          <tr>
            <td style=width: '200px'>
              <ConditionalField
                mode=mode
                value=value
                onChange=onChange
                editValue=editValue
              />
            </td>
            <td>
            <p>
              <ShowHide show=!isEditDisabled>
                <button
                    onClick=onClickEdit
                    disabled=isEditDisabled
                    type="button"
                    >
                    Edit
                  </button>
              </ShowHide>
                <ShowHide show=!isSaveAndCancelDisabled>
                  <button
                    onClick=onClickSave
                    type="button"
                    disabled=isSaveAndCancelDisabled
                  >
                    Update
                </button>
                <button
                  onClick=onClickCancel
                  disabled=isSaveAndCancelDisabled type="button"
                >
                  Cancel
                </button>
                </ShowHide>
            </p>
            </td>
          </tr>
      </tbody>
    </table>
  );


const MyApp = () => 
  const [value, setValue] = React.useState('James Bond')
  const [editValue, setEditValue] = React.useState('')
  const [mode, setMode] = React.useState('view')
  const onClickEdit = React.useCallback(() => 
    setEditValue(value)
    setMode('edit')
  ,[value]);
  const onClickCancel = React.useCallback(() => 
    setMode('view')
  ,[])
  const onChange = React.useCallback((e) => 
    const val = e.target.value;
    setEditValue(val)
  , [])
  const onClickSave = React.useCallback((e) => 
    setValue(editValue);
    setMode('view')
  ,[editValue])
  const isEditDisabled = React.useMemo(
    () => mode === 'edit',
    [mode]
  )
  const isSaveAndCancelDisabled = React.useMemo(
    () => mode === 'view',
    [mode]
  )
  const fieldStyle = React.useMemo(()=> (width: '200px'),[])
  return (<App
    fieldStyle=fieldStyle
    value=value
    editValue=editValue
    mode=mode
    onClickEdit= onClickEdit
    onClickCancel=onClickCancel
    onClickSave=onClickSave
    onChange=onChange
    isEditDisabled=isEditDisabled
    isSaveAndCancelDisabled=isSaveAndCancelDisabled
  />)
;

const root = document.getElementById('root');

ReactDOM.render(<MyApp />, root)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>

<div id="root"></div>

祝你好运……

【讨论】:

【参考方案2】:

我为上述问题陈述创建了一个小型 POC。你可以在这里找到它https://codesandbox.io/s/react-form-table-3wzc2

看看有没有帮助。

【讨论】:

如果有多行怎么办,我的意思是在这里你只对一个特定的表格单元格使用了 useRef。如何编辑其他行对应的单元格

以上是关于通过单击编辑按钮编辑表格单元格值 - React的主要内容,如果未能解决你的问题,请参考以下文章

创建打印按钮,启用和禁用基于单元格值excel

防止在外部单击时以弹出模式关闭单元格编辑器

iOS - 使 UITableView 与自定义单元格在按钮单击时可编辑

如何通过 JavaScript 获取 html 表格 td 单元格值?

在单元格编辑模式下,单击其他行时,不会更新kendo(可排序)网格值

在只读和编辑模式之间切换时表格列宽发生变化