一 table表格内编辑。子组件的input框处理
const EditableCell: React.FC<EditableCellProps> = ({
editing,
dataIndex,
editable,
title,
inputType,
record,
children,
...restProps
}) => {
// const inputNode = inputType == true ? <InputNumber /> : <Input />;
const inputNode = inputType == true ? <Input /> : null;
const formatAmountInput = (amount) => {
if (amount == '--') {
return '--'
} else {
return Number(amount).toLocaleString();
}
};
const handeInputPrice = (e: any) => {
// console.log('e', e.target.value)
}
return (
<td {...restProps}>
{editing ? (
<Form.Item
name={dataIndex}
style={{ margin: 0 }}
rules={[
{
validator: (_, value) => {
const numericValue = parseInt(value, 10);
if (!isNaN(numericValue) && numericValue >=0 && numericValue < 99999999) {
return Promise.resolve();
}
return Promise.reject(new Error("请输入大于等于0的且小于99999999的整数"));
},
},
]}
>
<InputNumber
formatter={value => formatAmountInput(value)}
parser={value => parseFloat(value.replace(/\$\s?|(,*)/g, ''))}
controls={false}
style={{ width: '100%' }} onBlur={handeInputPrice} />
</Form.Item>
) : (
children
)}
</td>
);
};
说明:
//formatter指定输入框展示值的格式
//parser指定从 `formatter` 里转换回数字的方式,和 `formatter` 搭配使用
//input输入的值千分位展示,比如输入33333变成33,333
const formatAmountInput = (amount) => {
if (amount == '--') { return '--' }
else {
return Number(amount).toLocaleString(); } };
二 校验数据, 是大于等于0的。 且0 能获取到校验
// 计算第一周到第四周。输入数据处理必须大于等于0 。且0 要有校验
const countParser = (value: any) => {
const parsedValue: number = parseFloat(value.replace(/\$\s?|(,*)/g, '')) || 0;
console.log(value, parsedValue);
return parsedValue;
}
// 处理数据千分位分隔
const formatAmount = (amount) => {
if (amount == '--') {
return '--'
} else {
return Number(amount).toLocaleString();
}
};
// 在这里处理输入值的变化 获取全部form不为空。当前0 可获取到校验
const handleInputChange = (changedValues, allValues) => {
console.log(changedValues, allValues)
const allInputValues = Object.values(allValues).every((value) => value !== undefined && value !== null && value !== '');
console.log(allInputValues)
if (allInputValues) {
addTotal(allValues)
}
};
form表单
<Form
ref={formRefB}
form={formB}
name="source"
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
onFinish={onFinish2}
onFinishFailed={onFinishFailed2}
onValuesChange={handleInputChange}
preserve={false}
autoComplete="off"
>
<Row
gutter={10}
style={{
backgroundColor: "#fff",
marginBottom: "20px",
padding: "15px 0",
}}
>
<Col span={12}>
<Form.Item
label="第一周"
name={"first_week"}
rules={[
{
validator: (_, value) => {
if (/^[0-9]+$/.test(value)) {
return Promise.resolve();
}
return Promise.reject(new Error("请输入大于等于0的整数"));
},
},
]}
>
<InputNumber
min={0}
formatter={value => formatAmount(value)}
parser={(value) => countParser(value)}
addonAfter="元"
style={{ width: "100%", textAlign: "right", }}
/>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
label="第二周"
name={"second_week"}
rules={[
{
validator: (_, value) => {
if (/^[0-9]+$/.test(value)) {
return Promise.resolve();
}
return Promise.reject(new Error("请输入大于等于0的整数"));
},
},
]}
>
<InputNumber
min={0}
formatter={value => formatAmount(value)}
parser={(value) => countParser(value)}
addonAfter="元"
style={{ width: "100%", textAlign: "right", }}
/>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
label="第三周"
name={"third_week"}
rules={[
{
validator: (_, value) => {
if (/^[0-9]+$/.test(value)) {
return Promise.resolve();
}
return Promise.reject(new Error("请输入大于等于0的整数"));
},
},
]}
>
<InputNumber
min={0}
formatter={value => formatAmount(value)}
parser={(value) => countParser(value)}
addonAfter="元"
style={{ width: "100%", textAlign: "right", }}
/>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
label="第四周"
name={"fourth_week"}
rules={[
{
validator: (_, value) => {
if (/^[0-9]+$/.test(value)) {
return Promise.resolve();
}
return Promise.reject(new Error("请输入大于等于0的整数"));
},
},
]}
>
<InputNumber
min={0}
formatter={value => formatAmount(value)}
parser={(value) => countParser(value)}
addonAfter="元"
style={{ width: "100%", textAlign: "right", }}
/>
</Form.Item>
</Col>
<Col
span={24}
style={{
textAlign: "right",
margin: '0px 0px 15px 0px'
}}
>
<span>合计:</span><span style={{ color: 'red' }}>{parseFloat(yjData).toLocaleString()}</span>元
</Col>
<Col
span={24}
style={{
textAlign: "right",
}}
>
<Button style={{ margin: "0 8px" }} onClick={closeFormB}>
取消
</Button>
<Button type="primary" onClick={handleSubmitFormB} loading={false}>
保存
</Button>
</Col>
</Row>
</Form>
说明:现象是 。 默认input框内就是0 。
三 如果 inputNumber 默认不为0 。
说明: 因为默认大于0 ,且使用 InputNumber就是 0 ,导致 ,正则rulse不生效。 所以默认未null default 设置为空。这样可以默认走需要的逻辑
<Col span={12} >
<Form.Item
label=""
wrapperCol={{ offset: 2, span: 22 }}
name={"reference_amount"}
initialValue={null}
rules={[
{
validator: (_, value) => {
const numericValue = parseInt(value, 10);
if (!isNaN(numericValue) && numericValue > 0 && numericValue < 99999999) {
return Promise.resolve();
}
return Promise.reject(new Error("请输入大于0且小于99999999的整数"));
},
},
]}
>
<InputNumber defaultValue={''}
formatter={value => {
if (value == '') {
return ''
} else {
return Number(value).toLocaleString();
}
}}
parser={value => value!.replace(/\$\s?|(,*)/g, '')}
disabled={isRefAmount}
addonAfter="元"
style={{ width: "100%" }}
onChange={handleReferenceAmount}
/>
</Form.Item>
</Col>