小编phe*_*phe的帖子

我有一个样式化的 MUI 按钮：

const SecondaryButton = styled(Button)<ButtonProps>(({ theme }) => ({
  ...
}));

export default SecondaryButton;

如果我像这样使用它：

<label htmlFor="contained-button-file">
   <input id="contained-button-file" multiple type="file" hidden onChange={this.selectFiles} />
      <SecondaryButton component='span'>
            Dateiauswahl
       </SecondaryButton>
</label>

我收到以下打字稿错误：

Type '{ children: string; component: string; }' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; classes?: Partial<ButtonClasses> | undefined; color?: "inherit" | "error" | ... 5 more ... | undefined; ... 9 more ...; variant?: "text" | ... 2 more ... | undefined; } & Omit<...> …

我们正在使用 React 和 Material UI 开发一个 Web 应用程序，我们需要考虑可访问性，这意味着我们的 Web 应用程序应由残疾人使用。

因此，Web应用程序需要可通过键盘操作。

必须能够通过 Tab 键浏览表单并使用 Enter 来触发某些操作。对于输入和按钮，这工作得很好。然而，对于复选框来说存在一个问题。我可以使用选项卡关注复选框，但无法使用 Enter 选中复选框。

当我使用 onChange/onClick 时，仅当我使用鼠标时才会选中复选框：

<Checkbox
     checked={this.state.statementNecessary}
     onChange={() => {
              this.setState({ statementNecessary: !this.state.statementNecessary })}} />

当我使用 onChange/Onclick + onKeyDown 时，我可以使用选项卡聚焦复选框，但是当我再次使用选项卡时，即使我只想转到下一个输入元素，复选框也会被选中。

<Checkbox
     checked={this.state.statementNecessary}
     onKeyDown={() => {
              this.setState({ statementNecessary: !this.state.statementNecessary })}}
     onChange={() => {
              this.setState({ statementNecessary: !this.state.statementNecessary })}} />     

任何提示表示赞赏。