MUI TextField 中的 inputProps 与 InputProps

【问题标题】：inputProps vs InputProps in MUI TextFieldMUI TextField 中的 inputProps 与 InputProps
【发布时间】：2021-12-20 13:15:51
【问题描述】：

inputProps 和InputProps 有什么区别？下面的 2 个TextFields 做同样的事情。我什么时候必须选择一个而不是另一个？

<TextField
  label="inputProps"
  inputProps={{
    name: 'inputProps',
    type: 'number',
    placeholder: 'placeholder',
    value,
    onChange: handleChange,
  }}
/>

<TextField
  label="InputProps"
  InputProps={{
    name: 'InputProps',
    type: 'number',
    placeholder: 'placeholder',
    value,
    onChange: handleChange,
  }}
/>

【问题讨论】：

标签： reactjs material-ui textfield

【解决方案1】：

InputProps 适用于Input react-component since:

TextField 由较小的组件（FormControl、Input、FilledInput、InputLabel、OutlinedInput 和 FormHelperText）组成，您可以直接利用这些组件来显着自定义表单输入。

inputProps 适用于将成为 input 的 DOM 元素，并获取其所有 attributes。

因此，如果需要更改与 input 作为 React 组件有关的内容（例如，设置 Icon），我们应该使用 InputProps。对于不受Input component properties 控制的所有其他更改，有多种input attributes。

【讨论】：