Question

我想知道如何在输入日期中设置占位符。

这是我的代码

<input type="text" onChange={(e) => { setbirth(moment(e.target.value).format('YYYYMMDD')) }} placeholder="생년월일" onFocus="(this.type = 'date')" onBlur="(this.type='text')" />

我已经查看了问题，但使用此代码抛出错误。

onfocus="(this.type='date')" onblur="(this.type='text')"


Warning: Expected `onFocus` listener to be a function, instead got a value of `string` type.
Warning: Expected `onBlur` listener to be a function, instead got a value of `string` type.

有什么办法可以不出错地更改它吗？

Answer 1

错误是因为 onFocus 和 onBlur 是期望触发回调的事件发射器。在您的代码中，onFocus 和 onBlur 是一个语句而不是回调，因此是错误。

您可以使用 react RefObject 轻松完成。参考：

import { useRef } from "react";

export default function App() {
  const ref = useRef();
  return (
    <div>
      <input
        type="text"
        ref={ref}
        onChange={(e) => console.log(e.target.value)}
        onFocus={() => (ref.current.type = "date")}
        onBlur={() => (ref.current.type = "text")}
      />
    </div>
  );
}

Answer 2

import React , { useRef } from "react";

const App= () => {
  const ref = useRef();
  return (
    <div>
      <input
        type="date"
        ref={ref}
        onChange={(e) => console.log(e.target.value)}
        onFocus={() => (ref.current.type = "date")}
        onBlur={() => (ref.current.type = "date")}
      />
    </div>
  );
}
export default  App

Answer 3

import { useRef } from "react";

export default function App() {
  const ref = useRef();
  return (
    <div>
      <input
        type="date"
        ref={ref}
        onChange={(e) => console.log(e.target.value)}
        onFocus={() => (ref.current.type = "date")}
        onBlur={() => (ref.current.type = "date")}
      />
    </div>
  );
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

如何在输入类型日期中设置占位符 [React]

3 个答案: