通过单击编辑按钮编辑表格单元格值 - 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的主要内容,如果未能解决你的问题,请参考以下文章
iOS - 使 UITableView 与自定义单元格在按钮单击时可编辑
如何通过 JavaScript 获取 html 表格 td 单元格值?