+1
Nhờ xem giúp lỗi trong đoạn logic code
Chào các bạn, xin lỗi vì lại làm phiền mọi người thêm lần nữa, nhưng vì thời gian đang khá gấp và mình mất gần một ngày mà vẫn chưa giải quyết được vấn đề nên m thực sự cần mn trợ giúp ạ. Trước đó các câu hỏi này của mình :
https://viblo.asia/q/ant-design-edit-cell-trong-table-3m5W0vvyKO7
https://viblo.asia/q/chuyen-doi-thoi-gian-sang-giay-yDZO711xZwj
Thực ra cùng là một vấn đề với câu này, và m cũng định hỏi câu này nối tiếp ở các Topic đó nhưng lại sợ không lên top được (vì m thực sự đang bị deadline nên rất cần gấp) nên mình đành tạo ra chủ đề mới ( mong Mod lượng thứ cho mình ).
M xin mô tả qua vấn đề của m để mn hiểu hơn, mình có 2 ô input bằng datePicker cho người dùng select chọn thời gian. Điều kiện valid cho 2 ô này là không được empty và start Time phải bé hơn end Time.
Sau khi 2 ô này hợp lệ sẽ tự động tính ra kết quả của ô Trim Time.
Qua Docs của thằng Ant ở đây:
https://ant.design/components/table/#components-table-demo-edit-cell ( cái này để edit cell trong table).
và ở đây:
https://github.com/ant-design/ant-design/issues/5155 ( cái này để validator cho đk start Time < end Time)
Mình cũng tạo ra được một cái demo cũng gần được như mong đợi ở đây: https://codesandbox.io/s/jovial-pond-ncc8s
Tuy nhiên, nó đang bị một bug là giá trị của 2 ô datePicker đang bị trễ 1 lần so với lúc chọn. Ví dụ ban đầu bạn select nó chưa lấy ngay giá trị ấy, bạn phải select một lần nữa thì nó mới lấy giá trị bạn select lần đầu. Vì thế nên kq của mình đang bị sai .
Mình có log ra thử ( line 25 , file demo.js) thì phát hiện nó vào lỗi empty
Mình thực sự chưa hiểu nguyên nhân vì đâu ? Nhờ mn xem qua giúp mình.
Mình xin cám ơn !
1 CÂU TRẢ LỜI
+2
Mình nghĩ là do phần validate của ant design là function async (nó dùng cái này https://github.com/yiminghe/async-validator) và phải validate success thì field mới có giá trị.
Còn function onChange => changeTime lại là synchronous function nên nó không đồng bộ với nhau.
Mình suy đoán như vậy chứ không chắc chắn.
Cách giải quyết là gọi setFieldsValue trong changeTime:
changeTime = (dataIndex, time, timeString) => {
const { record, handleSave } = this.props;
const { getFieldValue, setFieldsValue } = this.form;
setFieldsValue(
{
[dataIndex]: time
},
() => {
this.form.validateFields([dataIndex], (error, values) => {
if (error && error[dataIndex]) {
console.log("error", error);
return;
}
// ...
});
}
);
};
tks bạn, mình làm theo cách bạn hướng dẫn thì kq OK rồi.
Tuy nhiên, đoạn async mình chưa thực sự hiểu, nếu như phán đoán của bạn thì trường hợp này của mình sao ko bị lỗi như thế :
https://codesandbox.io/s/time-table-st3k5
( Vì trước đó, mình xử lý nhập Input bằng tay thì rất OK không có vấn đề gì cả.
Sau đó , k/h thay đổi yêu cầu và dùng TimePicker mới sinh ra lỗi này )
Nếu bạn sử dụng onChange cho input thay vì onPressEnter và onBlur thì cũng bị issue tương tự đó.
Các bạn ơi, xin giúp m với !
@thanh_tuan
Nếu không được thì chuyển hướng sang không dùng form nữa mà set value vào state và validate bằng tay thử xem bạn.
@pht mình cũng đã tính như thế thế, việc
validatebằng tay cũng không có khó khăn gì nhưng cái khó ở đây là sau khivalidatevà có lỗi thì bắn nó ra bằng cách nào ? Bình thường với Form, ở mỗifieldm sẽ để sẵn một thẻdivtrống bên dưới, để khi có lỗi thì thẻdivđó sẽ là nơi chứamessage looix.Tuy nhiên trường hợp này của mình là dùng
Table của Antdviệc render các cell là hoàn toàn tự động nên mình không thể can thiệp vào được mà bắt buộc phải dùngFormkết hợp vsTableđể hiển thị lỗi bên dướicellbạn à.Thế mới rắc rối chứ
@thanh_tuan
Bạn xem trả lời ở dưới nhé
@pht Mình cám ơn bạn nhiều nha