Question

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

我的问题是 - 仅仅存在disabled属性会禁用该元素，因此我无法将其值设置为＆＃34; false＆＃34;。即使以下代码禁用元素

<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>
   }
...

基本上，你可以传递别的东西，而不是假。您可以传入一个布尔值，该值存储在容纳CustomButton的容器的道具上。

你可以说isDisabled={this.props.disableInnerButton}它会像你期望的那样工作。更改布尔值将禁用或启用按钮。

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

Statement to add or not an attribute in JSX

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

1 个答案: