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

Question

有人知道如何让这些代码在React功能组件中工作吗？

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

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

试图在我的React项目中模仿这样的东西：https://stackoverflow.com/a/34565565/14677057

非常感谢您的帮助！非常感谢。

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元素不同。

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

`

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

`