我想根据组件的状态在 Button 上设置 disabled 属性,如下所示:
render() {
return (
<button type="button" {this.state.submitting ? 'disabled' : ''}
onClick={ this.handleSubmit }>Submit</button>
);
}
目前我在开始时收到一个意外的令牌错误 {,我错过了什么?
我想根据组件的状态在 Button 上设置 disabled 属性,如下所示:
render() {
return (
<button type="button" {this.state.submitting ? 'disabled' : ''}
onClick={ this.handleSubmit }>Submit</button>
);
}
目前我在开始时收到一个意外的令牌错误 {,我错过了什么?
您可以disabled
通过布尔值设置属性,如下所示
<button
type="button"
disabled={this.state.submitting}
onClick={this.handleSubmit}
>
Submit
</button>
你可以使用 null
<button type='button' disabled={this.state.submitting ? 'disabled' : null} onClick={this.handleSubmit}>Submit</button>
如果您希望根据某些条件添加禁用的属性,您可以执行以下操作:
const disableBtnProps = {};
if (some condition) {
disableBtnProps.disabled = false;
} else {
disableBtnProps.disabled = true;
}
然后在您的组件中,您可以执行以下操作:
<Button {...disableBtnProps} className="btn"> my button </Button>
如果您使用的是typescript,则可以在 Button 组件的类型/界面中添加可选属性
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
这将避免任何必要的检查并使代码检查更严格