amis-rpc-design/libs/amis/packages/amis-ui/examples/form/InputTable.tsx

51 lines
1.5 KiB
TypeScript
Raw Normal View History

2023-10-07 19:42:30 +08:00
import React from 'react';
import {Button, InputTable, Form, Controller, InputBox} from 'amis-ui';
export default function ButtonExamples() {
const handleSubmit = React.useCallback((data: any) => {
console.log('submit', data);
}, []);
return (
<div className="wrapper">
<Form defaultValue={{items: [{a: 1, b: 2}]}} onSubmit={handleSubmit}>
{({control, onSubmit}) => {
return (
<>
<InputTable
name="items"
control={control}
minLength={2}
maxLength={5}
columns={[
{
title: 'Name',
tdRender: ({control}) => {
return (
<Controller
name="key"
control={control}
isRequired
render={({field, fieldState}) => (
<InputBox
{...field}
placeholder="Key"
hasError={!!fieldState.error}
disabled={false}
/>
)}
/>
);
}
}
]}
/>
<Button onClick={onSubmit}>Submit</Button>
</>
);
}}
</Form>
</div>
);
}