Question

此代码有效。

              <TextField name="email"
                         label="Your email"
                         inputProps={{
                           'data-cy': 'feedback-form-email',
                         }}
                         fullWidth
              />

即使通过将inputProps值强制转换为任意值来跳过类型检查，此代码也是无效的。

<Checkbox name="consent"
                            inputProps={{
                              'data-cy': 'feedback-form-consent',
                            }}
                            checked={this.state.model.sender_consent}
                            onChange={this.onChange('sender_consent')}/>

当查看Checkbox和TextField的Material UI源时，

inputProps属性引用的类型不同，但是两者的用法相同...我希望它们能以相同的方式工作。

复选框文档：https://material-ui.com/api/checkbox/

PS：使用html作为后备广告，无法使用tsx高亮代码。

Answer 1

如果您想避免使用 any 类型，我发现以下方法对我有用：

type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
  [key: string]: string | undefined
}

const MyComponent = () => {
  const inputProps: InputProps = { 'data-cy': 'feedback-form-consent' }

  return <Checkbox inputProps={inputProps} />
}

这样做的好处是您仍然可以对所有其他 inputProps 进行类型检查和自动完成。

更进一步，如果您不需要使用任何传入的 props，您可以通过将 inputProps 的声明移到组件之外来优化它：

type InputProps = InputHTMLAttributes<HTMLInputElement> & {
  [key: string]: string | undefined
}

const inputProps: InputProps = { 'data-cy': 'feedback-form-consent' }

const MyComponent = () => (
  <Checkbox inputProps={inputProps} />
)

或者，如果你确实需要消耗一些道具，你可以使用useMemo：

type MyComponentProps = {
  testId?: string
}

type InputProps = InputHTMLAttributes<HTMLInputElement> & {
  [key: string]: string | undefined
}

const MyComponent = ({ testId }: MyComponentProps) => {
  const inputProps: InputProps = React.useMemo({ 'data-cy': testId }, [testId])

  return <Checkbox inputProps={inputProps} />
}

Answer 2

嗯，更正，加上所有可行的方法，这个问题对我来说是另外一个地方：/：

那项工作：

                  <Checkbox name="consent"
                            inputProps={{
                              'data-cy': 'feedback-form-consent',
                            } as any}
                            checked={this.state.model.sender_consent}
                            onChange={this.onChange('sender_consent')}/>

设置React Material UI Checkbox数据属性

2 个答案: