如何通过 prop 将禁用属性添加到反应中的按钮？

Question

我正在反应中创建一个自定义按钮组件。我想根据启用或禁用按钮的值将道具传递给该按钮。

我的问题是 - 仅存在禁用属性就会禁用该元素，因此我无法将其值设置为“false”。即使下面的代码也会禁用该元素

<input type="button" id="myBtn" value="Submit" disabled="" />

我需要完全删除该属性或通过 javascript 设置其属性。

document.getElementById("myBtn").disabled = true;

我的自定义按钮组件是 -

import React from 'react';

const CustomButton = ({ whenClicked, classNames, buttonText, isDisabled }) =>
    (
        <button
            onClick   = {whenClicked}
            className = {`btn ${classNames}`}
            type      = "button"
            disabled  = {isDisabled}
        >
           {buttonText}
        </button>
    );

export default CustomButton;

isDisabled是一个布尔值。

另一件事是，我在使用自定义按钮时丢失了按钮的默认提交行为。现在我总是需要传递一个点击处理程序。有什么办法可以再次实现相同的行为吗？

Answer 1

您目前拥有的应该可以完美运行。请注意，使用时CustomButton不要将 的值disabled作为string. 无论您传入什么内容，这都会使其被禁用。相反，您需要传入一个布尔值，这是 JSX 语法中的。

下面是一个示例用法，您可以将其放入使用该按钮的组件的渲染函数中：

...
render() {
    <div>
        ...
        <CustomButton
            whenClicked={() => console.log('I just got clicked')}
            buttonText="Some Button"
            isDisabled={false}
        />
        ...
    </div>
   }
...

基本上，您可以传递其他内容，而不是 false。您可以传入一个布尔值，该值存储在保存CustomButton.

你可以说isDisabled={this.props.disableInnerButton}，它会按照你的预期工作。更改布尔值将禁用或启用该按钮。

您可以在下面找到我最近就非常相似的主题给出的相关答案：

在 JSX 中添加或不添加属性的语句