我如何使用“onfocus”& React 功能组件中输入类型日期的“onblur”？

编程问答 2022-06-01

问题描述

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

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

我试图在用户单击输入元素之前显示占位符文本。然后当点击时，输入将更改为 MM/DD/YYYY。

尝试在我的 React 项目中模拟这样的事情： https://stackoverflow.com/a/34565565/14677057

希望得到任何帮助！谢谢！

解决方法

为该类型设置一个状态变量，然后在您渲染的内容中使用它：

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

你可以使用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>
      );
    }
,

使用 react 元素处理事件在语法上与 DOM 元素不同。

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

`

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

`

inputonbluronfocusreactjsreactjs