reactjs MUI数据表中的输入字段

w8f9ii69  于 2023-01-25  发布在  React
关注(0)|答案(1)|浏览(111)

可以在MUI数据表中添加输入字段吗?我希望用户能够修改MUI数据表中的数据。但是customBodyRender对我来说不起作用。

import MUIDataTable from "mui-datatables";
import {MuiThemeProvider} from '@material-ui/core/styles';
import TextField from '@mui/material/TextField';

const columns = [
        {
            name: 'name',
            label: translationState['label.name'],
            options: {
                sort: true,
            },
            customBodyRender: (value, tableMeta, updateValue) => {  
                return (
                    <TextField required defaultValue={value} 
                      onChange={event => updateValue(event.target.value)}
                      InputProps={{
                        readOnly: false, //I tried to make sure it is not readOnly
                      }}
                    />
                )
            }
        },... some other columns]

该字段仍处于禁用状态。mui-datatables documentation
我尝试过基于this example来做。

const columns = [
      {
        name: "Name",
        options: {
          filter: false,
          customBodyRender: (value, tableMeta, updateValue) => (
            <FormControlLabel
              label=""
              value={value}
              control={<TextField value={value} />}
              onChange={event => updateValue(event.target.value)}
            />
          )
        }
      },

但我不能让它工作。
MUI-datatables只用于显示数据吗?我是否应该使用@mui/x-data-grid而不是datatables来允许用户修改数据?

yv5phkfx

yv5phkfx1#

我把options的右括号放在了错误的行上...

const columns = [
    {
        name: 'name',
        label: translationState['label.name'],
        options: {
            sort: true,
        // }, closing parenthesis at the wrong line
            customBodyRender: (value, tableMeta, updateValue) => {  
                return (
                    <TextField required defaultValue={value} 
                      onChange={event => updateValue(event.target.value)}
                      InputProps={{
                          readOnly: false,
                      }}
                    />
                )
            }
        } // correct position of `options` closing parenthesis
    },... some other columns

customBodyRenderoptions的一个属性,因此它必须在括号内。

相关问题