如何消毒MUI自动完成输入？它不会在按键上更新

Question

我有什么

i有一个

MUI自动完成组件

内部反应。 goal

我想对输入的输入进行消毒，以便用户无法输入不合理的字符。

我尝试了什么

I也创建了一个本地和一个输入。我通过了元素和输入的受控值。

<Autocomplete>

问题

本地一个工作，因此不是更新逻辑弄乱事物。 MUI的行为很奇怪：输入字母不会被过滤，但是当我输入一个数字后，字母消失了。

Tl;dr

超越控制值

const Form = () => {
  const sanitize = value => value.replace(/[^0-9:]/g, '')
  const [value, setValue] = useState('')

  return (
    <>
      <input type="text" value={value} onChange={(e) => { setValue(sanitize(e.target.value)) }} />
      <Autocomplete
        options={['12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00']}
        value={value}
        inputValue={value}
        onChange={(_, value) => { setValue(sanitize(value || '')) }}
        freeSolo
        renderInput={(params) => (
          <TextField {...params} label="Value" value={value} onChange={(e) => {
            setValue(sanitize(e.target.value))
          }} />
        )}
      />
    </>
  )
}

prop。

阅读文档

组件具有可以控制的两个状态：

Answer 1

具有

inputValue

/

value

道具组合的“价值”状态。该状态表示用户选择的值，例如在按Enter.

时。

具有

onChange

/

inputValue

道具组合的“输入值”状态。该状态表示文本框中显示的值。

• solution

  当您需要控制和操纵输入字段的值时。您需要通过

  onInputChange
道，您不会通过输入字段的
• inputValue

  道具来实现。删除该部分
  

  value