CHÚ Ý: Đây là một thử nghiệm khám phá hooks trong thời kỳ alpha. Tôi không sử dụng nó trong bất kỳ dự án nào và không có ý định duy trì dự án này.
react-form-stateful
react-form-stateful là một component form đầy đủ tính năng, có thể mở rộng cho React sử dụng React Hooks
CHÚ Ý: Dự án này yêu cầu sử dụng phiên bản alpha của React để sử dụng.
Bắt Đầu
npm install --save react-form-stateful
Ví dụ
Sử dụng Cơ Bản
import { FC } from 'react';
import { StatefulForm, SFInput, SFSelect, SFTextArea } from 'react-form-stateful';
import * as yup from 'yup';
const ValidationSchemeForm: FC = () => {
return (
<StatefulForm
validationSchema={yup.object().shape({
email: yup
.string()
.required('Email required')
.email('Invalid email address'),
desc: yup.string().max(256, 'Please keep your description short!'),
complaint: yup
.string()
.required('Complaint required')
.max(10000, 'Max complaint size: 10,000 characters.'),
})}
>
<div>Feedback form:</div>
<label>
Email:
<SFInput name="email" />
</label>
<label>
Short Description:
<SFInput name="desc" />
</label>
<label>
Reason for complaint:
<SFSelect
name="reason"
defaultEntry={'Please select a reason'}
values={['Bug', 'Typo', 'Feature Request', 'Other']}
/>
</label>
<label>
Complaint:
<SFTextArea name="complaint" />
</label>
</StatefulForm>
);
};
Các ví dụ khác
Các ví dụ khác có thể được thấy trong thư mục ví dụ. ValidationScheme.tsx là một biểu mẫu đơn giản và hai biểu mẫu khác phức tạp hơn.
Tùy chỉnh Biểu mẫu
Context được sử dụng để tiết lộ trạng thái. Điều này cho phép viết các hooks hỗ trợ. Một số hooks đã tồn tại, nhưng có thể viết thêm dễ dàng. (Hãy tự do gửi PR).
Các Component
Một trong những thành phần từ các thành phần:
type SFControlProps<T = string> = {
name: string;
className?: string;
errorClassName?: string;
initialValue?: T;
defaultValue?: T;
};
export const SFInput: FC<SFControlProps> = props => {
const { touch, value, setValue, error } = useSFControl(props.name, props.initialValue, props.defaultValue);
return (
<Fragment>
<input className={props.className} onBlur={touch} value={value || ''} onChange={e => setValue(e.target.value)} />
<div className={props.errorClassName}>{error}</div>
</Fragment>
);
};
Ví dụ Sử Dụng
import { FC, createElement } from 'react';
import { StatefulForm, SFInput } from 'react-form-stateful';
const Form: FC = () => {
return (
<StatefulForm>
<SFInput name="item" />
</StatefulForm>
);
};
Bạn có thể thấy các thành phần phù hợp với giao diện ứng dụng của bạn, nhưng các thành phần cơ bản cũng tồn tại để thuận tiện của bạn.
Mở Rộng
Mặc dù bộ giảm không được tiết lộ, nhưng việc gửi và thao tác được tiết lộ, cho phép mở rộng thông qua hiệu ứng phụ. Một ví dụ về điều này có thể thấy trong các ví dụ/pages/Pages.tsx.
NO_DEFAULT và ASYNC_VALIDATION
Có hai hằng số đặc biệt giúp mở rộng chức năng của react-form-stateful.
NO_DEFAULT
NO_DEFAULT ngăn các đặt lại ảnh hưởng đến giá trị này. Hữu ích cho các giá trị ẩn được sử dụng để kiểm soát xác nhận. Điều này được sử dụng trong ví dụ nâng cao ví dụ/pages/Pages:
const valueState = useSFValue<number[]>(
'@@pages',
[0],
NO_DEFAULT, // Don't get reset
value => (props.pages.length !== value.length ? 'more pages exist' : null)
);
ASYNC_VALIDATION
ASYNC_VALIDATION được sử dụng để trì hoãn việc kiểm tra đến một quá trình bên ngoài. Điều này hữu ích khi bạn muốn trì hoãn việc kiểm tra đến một quá trình riêng biệt. Điều này cũng có thể được thực hiện bằng Promises, nhưng có thể có trường hợp ASYNC_VALIDATION tiện lợi hơn.
const { error, setValue, value, touch, touched } = useSFControl<string>(props.name, '', '', () => ASYNC_VALIDATION);
Khi kiểm tra được kích hoạt, trạng thái lỗi được đặt thành { async:true }. Biểu mẫu không thể được gửi đi cho đến khi điều này được giải quyết. Một cách để giải quyết vấn đề này là sử dụng hook useSFError và đặt trạng thái lỗi cho thành phần.
const [, setError] = useSFError(props.name);
setError('Invalid username');
Công trạng đã được đề cập trước đó
- Formik (Rõ ràng)
Chi tiết tải về:
Tác giả: ckedwards
Nguồn: https://github.com/ckedwards/react-form-stateful
Giấy phép: MIT license
