javascript - 如何在反应模糊时按排序顺序显示密码？

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 事件的事件对象。您可以从textareafrom获取值v.target.value。v.target.value.split(",")应该可以工作，但如果只输入一个 PIN，您的数组中可能会出现一个空字符串。