Question

我想根据组件的状态在Button上设置disabled属性，如下所示：

render() {
  return (
    <button type="button" {this.state.submitting ? 'disabled' : ''} 
      onClick={ this.handleSubmit }>Submit</button>
    );
}

目前我在开场时遇到意外的令牌错误{，我错过了什么？

Answer 1

您可以通过布尔值设置disabled属性，如此

<button
  type="button"
  disabled={this.state.submitting}
  onClick={this.handleSubmit}
>
  Submit
</button>

Example

Answer 2

您可以使用null

<button type='button' disabled={this.state.submitting ? 'disabled' : null} onClick={this.handleSubmit}>Submit</button>

Answer 3

如果您希望根据某些条件添加禁用的属性，则可以执行以下操作：

const disableBtnProps = {};
if (some condition) {
  disableBtnProps.disabled = false;
} else {
 disableBtnProps.disabled = true;
}

然后在您的组件中可以执行以下操作：

 <Button {...disableBtnProps} className="btn"> my button </Button>

Answer 4

如果您使用的是打字稿，您可以在 Button 组件的类型/界面中添加 optional property

disabled?: boolean

将 disabled 设为可选属性，我们允许 boolean 和 undefined

因此，如果将 disabled 的布尔值作为 prop 传递，它将使用传递的值将 disabled 属性添加到按钮。如果在这种情况下没有传递 disabled 属性，它的值被认为是未定义的，并且不会添加 disabled 属性。

import { ReactNode } from 'react'

type Props = {
  disabled?: boolean
  type: 'button' | 'reset' | 'submit'
  btnClass: string
  children: ReactNode
  onClick?: () => void
}

function Button({
  type,
  disabled,
  btnClass,
  children,
  onClick,
}: Props): JSX.Element {
  return (
    <button
      onClick={onClick}
      type={type}
      disabled={disabled}
      className={btnClass}
    >
      {children}
    </button>
  )
}

export default Button

这将避免任何必要的检查并使代码检查更加严格

React：根据状态设置disabled属性

4 个答案: