材料表 - 可编辑单元格验证答案

【问题标题】：Material Table - Editable Cell Validation材料表 - 可编辑单元格验证
【发布时间】：2022-01-03 00:04:17
【问题描述】：

我正在使用 Material Table 来显示表格数据。我想对姓氏字段应用验证。如果surname 长度小于 3，它应该在输入字段下方以红色显示 too small 错误。

如何做到这一点？示例代码可以在这里找到：https://codesandbox.io/s/misty-breeze-corjj?file=/src/App.tsx

谢谢

【问题讨论】：

【解决方案1】：

  {
      title: "Surname",
      field: "surname",
      editComponent: (props: any) => (
        <TextField
          onChange={props.onChange}
          type="number"
          helperText={props.helperText}
          error={props.error}
          variant="standard"
          value={props.value}
        />
      ),
      validate: (rowData: any) =>
        rowData.surname.length < 3
          ? { isValid: false, helperText: "too small" }
          : true
    }

我认为这可能会有所帮助。尝试使用column.editComponent 覆盖列的编辑组件，然后使用道具将helperText 和error 传递给TextField。我在这里使用了material-ui v5 TextField .

【讨论】：

【解决方案2】：

我正在使用editable 选项来检查validation。这里我使用onRowUpdate 来检查更新的数据，以便我们可以显示验证消息。可以查看full example in codesandbox

<MaterialTable
            title="Editable Example"
            columns={
                [
                    {
                        title: 'Name', field: 'name',
                        editComponent: (props) => (
                            <TextField
                                type="text"
                                error={nameError.error}
                                helperText={nameError.helperText}
                                value={props.value ? props.value : ''}
                                onChange={e => props.onChange(e.target.value)}
                            />
                        )
                    },
                    { title: 'Surname', field: 'surname' }
                ]}
            data={state.data}
            icons={tableIcons}
            editable={{
                onRowUpdate: (newData, oldData) =>
                    new Promise((resolve, reject) => {
                        setTimeout(() => {

                            if (newData.name === '' || newData.name.length < 3) {
                                setNameError({
                                    error: true,
                                    label: 'required',
                                    helperText: 'Name should be more than 3 character'
                                });
                                reject();
                                return;
                            }

                            resolve();
                            if (oldData) {
                                setState(prevState => {
                                    const data = [...prevState.data];
                                    data[data.indexOf(oldData)] = newData;
                                    return { ...prevState, data };
                                });
                            }
                        }, 600);
                    })
            }}
        />

【讨论】：

谢谢，但我想要当用户点击单元格时，它应该变成可编辑的功能