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

Question

I want to know how to set placeholder in input date.

this is my code

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

I've looked through the question, but using this code throws an error.

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.

Is there any way to change it without error?

Answer 1

The error is because onFocus and onBlur are event emitters that expect to fire a callback. In your code, onFocus and onBlur is a statement instead of a callback and thus the error.

You can use react RefObject to do it easily. Reference:

• https://reactjs.org/docs/refs-and-the-dom.html
• https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event
• https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event

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>