在運行時將輸入標簽轉換為駱駝大小寫

Question

我正在將 React 與 Formik & Yup 一起使用，目前我有一個輸入字段為 f

<input
              type="fname"
              name="fname"
              onChange={handleChange}
              onBlur={handleBlur}
              value={values.fname}
              className="form-control inp_text"
              id="fname"
            />

我有是的邏輯

  fname: Yup.string()
    .required("First Name is a required field")
    .min(1, "Name is too Short")
    .max(20, "Name is too Big")
    .matches(
      /^[A-Z][A-Za-z]*( [A-Z][A-Za-z]*)*$/,
      "Not a correct format. Eg. Rahul Kumar "
    ),

當我手動編寫它時這是有效的，但我的要求是，如果我在運行時編寫它應該轉換為駱駝案例

例如

abhimanu singh -> Abhimanu Singh Abhi Raj -> Abhi Raj

像這樣任何人都可以幫助我或指導我

Answer 1

您可以在調用handleChange之前將值轉換為 Camel Case，例如：

const handleChangeWithCamelize = (e) => {
  const copyE = { ...e };
  copyE.target.value = camelize(copyE.target.value);
  handleChange(e);
};

<input
  id="fname"
  type="text"
  value={values.fname}
  onChange={handleChangeWithCamelize}
  onBlur={handleBlur}
  className={
    errors.fname && touched.fname
      ? "text-input error"
      : "text-input"
  }
/>

和駝峰式轉換器 function 會像：

function camelize(text) {
  const words = text.split(" ");

  for (let i = 0; i < words.length; i++) {
    if (words[i] && words[i].length > 0) {
      words[i] = words[i][0].toUpperCase() + words[i].substr(1);
    }
  }

  return words.join(" ");
}

您可以查看此沙盒以獲取實時工作示例。

Answer 2

發布的駱駝色camelize @Ahmet Emre Kılınç 可以使用單個正則表達式進行簡化：

function camelize(text) {
 return text.replace(/\b[a-z]/g, m => m.toUpperCase());
}