在 TextField 中设置默认选择时间 type=time material ui

Question

我想将默认时间设置为 Material UI 的文本字段类型时间。我的要求是在点击选择器之前，没有设置时间，但是点击时，出现08:00作为默认选择时间。

Before clicking

After clicking

Answer 1

将您的 TextField 变成受控组件，方法是给它一个设置为状态的 value，然后更新它 onChange。

that API 没有焦点或点击处理程序道具，但您可以用 span 包装 TextField 并在其上设置点击处理程序。

从那里创建一个函数，如果事件目标中没有值，则将状态更新为 "08:00" 的字符串值。这将允许您以很少的开销重用 onClick 和 onChange 的函数。

const [time, setTime] = useState("")

const changeTime = (e) => {
  setTime(e.target.value || "08:00")
}

<span onClick={changeTime}>
  <TextField value={time} type="time" onChange={changeTime}/>
</span>

onClick 起作用是因为 event bubbling。您将单击输入，但这会冒泡到 span 的事件侦听器。应该没有机会点击跨度，因为它会适合内容，输入会覆盖它。

在 TextField 中设置默认选择时间 type=time material ui

Set a default pick time in a TextField type=time material ui

javascript

picker

textfield

reactjs

material-ui