React-Material UI-TextField控制的输入，带有自定义道具的自定义输入组件

Question

如何将自定义道具传递给inputComponent？

例如，我有一个MuiTextField组件：

const CustomerSocialMask = React.forwardRef<HTMLElement, CustomProps>(
function CustomerSocialMask(props, ref: any) {
// deploy test
const { onChange, ...other } = props;
return (
<IMaskInput
{...other}
mask="000.000.000-00"
definitions={{
'#': /[1-9]/,
}}
inputRef={ref}
onAccept={(value: any) =>
onChange({ target: { name: props.name, value } })
}
overwrite={false}
/>
);
},
);
<MuiTextField
sx={{
'& input[type=number]': {
MozAppearance: 'textfield',
},
'& input[type=number]::-webkit-outer-spin-button': {
WebkitAppearance: 'none',
margin: 0,
},
'& input[type=number]::-webkit-inner-spin-button': {
WebkitAppearance: 'none',
margin: 0,
},
}}
variant="standard"
multiline={data.fieldType === FieldType.LONG_TEXT}
placeholder={data.settings.placeholder}
fullWidth
type={inputType}
InputProps={{
startAdornment: prefix && (
<InputAdornment position="start">
<Typography color="text.primary">{prefix}</Typography>
</InputAdornment>
),
endAdornment: suffix && (
<InputAdornment position="start">
<Typography color="text.primary">{suffix}</Typography>
</InputAdornment>
),
inputComponent: CustomerSocialMask,
}}
name={name}
onChange={
(data.settings as ShortTextSettings).valueType ===
ValueType.CURRENCY || path === PersonalDetail.PHONE
? onChange
: handleChange
}
onBlur={handleBlurWithFix}
value={valueAdjusted}
error={!!error}
helperText={error}
/>

当我试图将自定义道具传递给inputComponent时，比如：

inputComponent: <CustomerSocialMask customProp={something}/>,

我得到以下错误：

Failed prop type: Invalid prop `inputComponent` of type `object` supplied to `ForwardRef(Input2)`, expected a single ReactElement type.

因此，我必须只向inputComponent提供refs，但不能将外部数据/道具传递给forwardRef组件。我想在示例的CustomerSocialMask组件中使用customProp。我该怎么做？在文档中找不到任何内容。

Answer 1

Material UITextField提供了一些"道具"样式的属性，用于将配置应用于组合以进行输入的子组件。

两个值得注意的是：

• InputProps：这为基于variant属性(即OutlinedInput、FilledInput等(选择的材质UI组件提供属性
• inputProps：它为正在使用的底层输入提供属性，默认情况下它是input

使用InputProps.inputComponent时，底层输入将替换为所提供的组件，这允许您使用inputProps传递额外的属性来配置自定义输入。

示例：

<TextField
InputProps={{
inputComponent: CustomerSocialMask,
}}
inputProps={{
customProp: something
}}
/>

Answer 2

解决方案似乎与您正在做的非常接近，您只需要将一个函数传递给inputComponent。

inputComponent: (props) => <CustomerSocialMask {...props} myCustomPropName={doSomething} />

Answer 3

Hello MUITextfield inputProps属性只能接受具有普通input标记的类型可以接受(根据类型而不同(，但是您可以使用MUIInput组件来传递要使用的自定义组件，并且inputProps是可用的，因此您可以传递自定义字段的props。

我在这个沙盒中创建了一个快速草稿：https://codesandbox.io/s/react-mui-using-a-custom-component-with-input-compnent-zysvji?file=/src/App.tsx

我希望这能有所帮助。E