Question

我要为ant design4表和ant design输入字段添加我的react项目。任何人都知道如何验证所需的输入

谢谢

在这里编码

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    render: text => <a>{text}</a>,
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: 'Tags',
    key: 'tags',
    dataIndex: 'tags',
    render: tags => (
      <>
        {tags.map(tag => {
          let color = tag.length > 5 ? 'geekblue' : 'green';
          if (tag === 'loser') {
            color = 'volcano';
          }
          return (
            <Tag color={color} key={tag}>
              {tag.toUpperCase()}
            </Tag>
          );
        })}
      </>
    ),
  },
  {
    title: 'Action',
    key: 'action',
    render: (text, record) => (
      <Space size="middle">
        <a>Invite {record.name}</a>
        <a>Delete</a>
      </Space>
    ),
  },
];

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: <input/>,
    address: 'New York No. 1 Lake Park',
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    name: 'Jim Green',
        age: <input/>,
    address: 'London No. 1 Lake Park',
    tags: ['loser'],
  },
  {
    key: '3',
    name: 'Joe Black',
       age: <input/>,
    address: 'Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
];
 const onFinish = values => {
    console.log(values);
  };
ReactDOM.render( 
  <div> 
<Form   name="control-hooks" onFinish={onFinish}>
  <Table columns={columns} dataSource={data} /> <div><Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button> </Form.Item>

Answer 1

只需将<input/>放在<Form.Item>中，并使用其rules道具。您可以看到所有可能的规则here。我建议使用antd的<Input/>并设置宽度。

const data = [
  {
    key: "1",
    name: "John Brown",
    age: (
      <Form.Item
        name="age1"
        rules={[{ required: true, message: "Age is required" }]}
      >
        <Input style={{ width: 150 }} />
      </Form.Item>
    ),
    address: "New York No. 1 Lake Park",
    tags: ["nice", "developer"],
  },

  ...
];

查看此工作link

ANT设计4个表输入字段验证

1 个答案: