如何使用 "onfocus" &。 "onblur" 对于 React 功能组件中的输入类型日期？

Question

有谁知道如何让这段代码在 React 函数式组件中工作？

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

我试图让占位符文本在用户点击输入元素之前出现。然后单击时，输入将变为 MM/DD/YYYY.

试图在我的 React 项目中模拟这样的东西：

非常感谢任何帮助！谢谢！

Answer 1

有类型的状态变量，然后在渲染中使用它：

const Example = () => {
  const [type, setType] = useState('text');
  return (
    <input 
      type={type} 
      onFocus={() => setType('date')} 
      onBlur={() => setType('text')}
    />
  )
}

Answer 2

您可以使用 Ref 进行对焦。 onBlur 将适用于驼峰式大小写。

eg:
    function CustomTextInput(props) {
      // textInput must be declared here so the ref can refer to it
      const textInput = useRef(null);
      
      function handleClick() {
        textInput.current.focus();
      }
    
      return (
        <div>
          <input
            type="text"
            ref={textInput} />
          <input
            type="button"
            value="Focus the text input"
            onClick={handleClick}
          />
        </div>
      );
    }

Answer 3

使用 React 元素处理事件在句法上不同于 DOM 元素。

事件使用驼峰命名，而不是小写。
我们需要传递一个 JSX 函数，而不是一个字符串。

`

function HandleInputField(){
   const onChange=()=>{//your code}
   const onFocus=()=>{//your code}
   const onBlur=()=>{//your code}
   return <input onChange={} onFocus={} onBlur={}/>
 }

`

如何使用 "onfocus" &。 "onblur" 对于 React 功能组件中的输入类型日期？

How do I use "onfocus" &. "onblur" for input type date in React Functional Component?

input

onfocus

onblur

reactjs