材料表 - 可編輯單元格驗證

Question

我正在使用材料表來顯示表數據。 我想對姓氏字段應用驗證。 如果surname長度小於 3，它應該在輸入字段下方以紅色顯示太小的錯誤。

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

謝謝

Answer 1

我正在使用editable選項來檢查validation 。 在這里，我使用onRowUpdate來檢查更新的數據，以便我們可以顯示驗證消息。 您可以在代碼框中查看完整示例

<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);
                    })
            }}
        />

Answer 2

  {
      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 。