下面是根据您提供的代码进行了修正和完善,实现了选中状态的呈现和验证通过的功能:
const trimLeft = function trimLeft(s) {
return s.replace(/(^\s*)/g, '');
};
const isEmpty = function isEmpty(value) {
return value === undefined || value === null || trimLeft(value) === '';
};
const checkRequired = (fields) => {
if (isEmpty(fields['extension']) || isEmpty(fields['maxExtenPeriods']) || isEmpty(fields['repayChannel'])) {
return '都要填写';
}
};
const checkoutLegalPerson = (field, value) => {
if (!value) {
return `${field}不能为空`;
}
};
const validator = createValidator({
extension: [(value, fields) => {
if (fields.extension && isEmpty(value)) {
return '最长展期期数';
}
}],
maxExtenPeriods: [(value, fields) => checkoutLegalPerson('maxExtenPeriods', value)],
repayChannel: [(value, fields) => checkoutLegalPerson('还款渠道', value)],
});
<InputGroup field={repayChannel} label="还款渠道" sm={3} lsm={3} size="sm">
<div className="col-sm-9">
<div className="col-sm-4">
<div className="checkbox">
<label>
<input type="checkbox" name="channelType" checked={repayChannel.value === 'A'} onChange={() => { repayChannel.onChange('A') }} /> 线下
</label>
</div>
</div>
<div className="col-sm-4">
<div className="checkbox">
<label>
<input type="checkbox" name="channelType" checked={repayChannel.value === 'B'} onChange={() => { repayChannel.onChange('B') }} /> 主动
</label>
</div>
</div>
<div className="col-sm-4">
<div className="checkbox">
<label>
<input type="checkbox" name="channelType" checked={repayChannel.value === 'C'} onChange={() => { repayChannel.onChange('C') }} /> 代扣
</label>
</div>
</div>
</div>
</InputGroup>
// 验证
const fields = {
extension: true,
maxExtenPeriods: true,
repayChannel: true,
};
const validateResult = validator.validate(fields);
if (validateResult.hasError) {
console.log(validateResult.errors); // 输出错误信息数组
} else {
console.log("验证通过"); // 验证通过的逻辑处理
}
根据您提供的代码,对于还款渠道(repayChannel
)的选中状态呈现和值的映射已经修正。在验证部分,使用了 validator
对象进行字段验证,并根据返回的结果判断是否通过验证。
内容由零声教学AI助手提供,问题来源于学员提问