如何在react中为按钮添加disabled属性？

Question

这是我的代码

import React from 'react'
import PropTypes from "prop-types";

export default function Button({ htmlType, type, disabled, action, ...props}) {
  return (
    <button type={htmlType} onClick={action}>
        {props.children}
    </button>
  )
}

Button.propTypes = {
    htmlType: PropTypes.string.isRequired,
    action: PropTypes.func,
    disabled: PropTypes.bool
};

我通过这段代码调用Button组件

 <Button disabled={true}>button title</Button>

我想在禁用 props 为 true 时向按钮添加禁用的 html 属性，该怎么做？

Answer 1

您可以像这样编写单行 if-else 语句：

<button disabled={propsDisabled}>button title</button>

这里，

propsDisabled

是可以通过

props

传递的变量，它是一个

boolean

变量，可以是true或false。为了避免混淆，我没有使用

disabled

本身，但您可以将变量名称用作

disabled

。

当

propsDisabled

为

true

时，该按钮将被禁用，而当

propsDisabled

为

false

时，该按钮将不会被禁用。

Answer 2

Aya，我无法完全理解你的问题，看起来你正在试图解决一个问题，而你一开始的问题中有第二个问题。

您使用Ant组件吗？在

disabled

组件本身上使用

<Button />

属性。 （注意组件名称中的大写字母 B

Button

）。

<Button disabled={true} />
// or (it's the same but different JSX syntax)
<Button disabled />

这与兄弟@Abdul Qadir的回答相同。

如果您使用原生 HTML elements，您还可以在 <button /> 元素上调用禁用的 属性

（请注意元素名称 button 中的小字符

b

）同样的方式，它应该可以工作：

<button disabled={true}>I'm disabled</button>
// or (the same but different syntax)
<button disabled>I'm disabled</button>

---

所以这是两个答案，

如果您正在使用 Ant 组件：

import { Button } from 'antd';

const CustomButton = ({ disabled, children }) =>{
  return <Button disabled={disabled}>{children}</Button>
}

如果您使用原生 HTML 元素：

const CustomButton = ({ disabled, children }) =>{
  return <button disabled={disabled}>{children}</button>
}