在可编辑的物料表上，如何限制用户不能输入字符，特殊字符或负数？

问题描述

我正在使用可编辑的材料表，对于其中一列，我希望用户只能输入数字，而不能输入任何字符或特殊字符。我检查了材料表网站上的“验证”部分，但与此无关。

这是网站提供的可编辑材料表的代码示例：

function Editable() {
  const { useState } = React;

  const [columns,setColumns] = useState([
    { title: 'Name',field: 'name' },{ title: 'Surname',field: 'surname',initialEditValue: 'initial edit value' },{ title: 'Birth Year',field: 'birthYear',type: 'numeric' },{
      title: 'Birth Place',field: 'birthCity',lookup: { 34: 'İstanbul',63: 'Şanlıurfa' },},]);

  const [data,setData] = useState([
    { name: 'Mehmet',surname: 'Baran',birthYear: 1987,birthCity: 63 },{ name: 'Zerya Betül',birthYear: 2017,birthCity: 34 },]);

  return (
    <MaterialTable
      title="Editable Preview"
      columns={columns}
      data={data}
      editable={{
        onRowAdd: newData =>
          new Promise((resolve,reject) => {
            setTimeout(() => {
              setData([...data,newData]);
              
              resolve();
            },1000)
          }),onRowUpdate: (newData,oldData) =>
          new Promise((resolve,reject) => {
            setTimeout(() => {
              const dataUpdate = [...data];
              const index = oldData.tableData.id;
              dataUpdate[index] = newData;
              setData([...dataUpdate]);

              resolve();
            },onRowDelete: oldData =>
          new Promise((resolve,reject) => {
            setTimeout(() => {
              const dataDelete = [...data];
              const index = oldData.tableData.id;
              dataDelete.splice(index,1);
              setData([...dataDelete]);
              
              resolve()
            },}}
    />
  )
}

例如，如何验证用户未输入出生年份的字符串或负数？任何帮助将不胜感激。

解决方法

您的问题中有答案。在标题为“出生年份”的列上，类型设置为数字！ ：）

您还可以添加自己的自定义组件来编辑各列，如下所示：

{ 
title: 'Birth Year',field: 'birthYear',editComponent: (props: any) => (
  <Input 
    defaultValue={props.value} 
    onChange={(e) => props.onChange(e.target.value)} 
    type="number"
  /> 
},