如何在 React 中的模糊中按排序顺序显示 PIN 码?

Question

我正在使用react-hook-form.我有密码textarea用户可以在其中输入pincodes，现在我想验证我的值blur平均密码应该是6位并以排序顺序显示。

onblur事件无法正常工作？ 这是我的代码 https://codesandbox.io/s/react-hook-form-get-started-v24jk

<TextField
inputRef={register}
label={"pincode"}
variant="outlined"
placeholder={"dd"}
multiline={true}
rows="4"
rowsMax="12"
name={"pincode"}
onBlur={v => {
console.log(v);
function onlyUnique(value, index, self) {
return self.indexOf(value) === index && value.trim().length === 6;
}
if (v) {
let codes = v.split(",");
let newCodes = codes.filter(onlyUnique);
return newCodes.sort().join(",");
}
return "";
}}
/>

反应钩子表单 API https://react-hook-form.com/api

Answer 1

onBlur={v => {...}

v变量表示 onBlur 事件的事件对象。您可以从v.target.value的textarea中获取值。v.target.value.split(",")应该可以工作，但如果只输入了一个 PIN，则最终可能会在数组中出现空字符串。