MUI 输入不允许 oninput 属性答案

【问题标题】：MUI Input doesn't allow oninput attributeMUI 输入不允许 oninput 属性
【发布时间】：2021-10-24 07:12:04
【问题描述】：

我有一个这样定义的 MUI 输入组件，其中 oninput（也尝试作为 onInput）属性不会被 MUI 选择

  <Input
    variant="standard"
    size="small"
    type="number"
    inputProps={{
      min: '0',
      oninput: "validity.valid||(value='');",
    }}
    onChange="validity.valid||(value='');"
  />

正如 MUI doc 所说，

inputProps 对象 {} Attributes 应用于输入元素。

好吧，oninput 是 input 元素的有效 Event 属性，但在渲染时，底层原生 HTML 输入元素仅定义了 min 属性，而缺少 oninput 属性。

这里出了什么问题？我什至用 onChange 尝试过，但没有成功。

【问题讨论】：

试试驼色箱onInputref
@diedu 哦对忘记加了，我试过了，还是不行
说onInput 应该是一个函数而不是一个字符串。例如onInput: (e) => console.log(e.target.value) 应该打印输入的值

标签： javascript reactjs material-ui

【解决方案1】：

您应该将函数参数作为onInput prop 传递，而不是像这样的字符串：

const handleOnInput = (e) => {
    //e.target.value
};

<Input
    value={val}
    variant="standard"
    size="small"
    type="number"
    inputProps={{
      min: "0",
      onInput: handleOnInput
    }}
/>

您可以查看this sandbox 的实时工作示例。

【讨论】：