如何禁用 React 中导入另一个组件的按钮？答案

【问题标题】：how to disable a button in React imported into another component?如何禁用 React 中导入另一个组件的按钮？
【发布时间】：2021-01-29 00:25:57
【问题描述】：

这是我的第一个反应应用程序，我不确定如何禁用导入的按钮。我有一个组件按钮，我将其导入到父组件中

import React, { Component } from "react";
import "../../index.scss";

class Submit extends Component {
  render() {
    return (
      <button className="button"
      onClick={() => this.props.onClick()}>
        SUBMIT
      </button>
    );
  }
}

export default Submit;

在渲染它的组件中如下

  renderSubmit() {
    return (
      <Submit
        onClick={() => this.submitForm()}
      />
    );
  }

  render() {
   
    return (
      <div className="table">
        <div className="table-actions">
            {this.renderRefresh()}
            {this.renderSubmit()}
        </div>
      </div>
    );
  }
}

我试图从原始组件中将类设置为禁用，但它依赖于状态属性并且无法识别它。

import React, { Component } from "react";
import "../../index.scss";

class Submit extends Component {
  render() {
    return (
      <button className="button"
      disabled={this.state.start}
      onClick={() => this.props.onClick()}>
        SUBMIT
      </button>
    );
  }
}

export default Submit;

如何将禁用状态设置为状态属性？

【问题讨论】：

我想你会在onClick() 中设置状态，但是，我没有看到这个功能？能否请您添加它，以便我看一下？
没有 onclick 功能...在父组件中调用 this.submitForm()。这是问题吗？我把教程的组件拿出来了，不太清楚onclick是干什么用的
如果希望按钮在点击后被禁用，则需要将其编码为onClick={() => this.props.onClick()}>。 onClick() 在哪里？为什么不尝试将此函数 onClick() {this.setState({'start':true});} 添加到您的组件中，然后将 onClick={() => this.onClick()} 添加到您的 onClick 调用者，因为它不再是道具了。

标签： reactjs react-native react-redux react-router

【解决方案1】：

您的Submit 按钮不允许在底层button 组件上设置任何其他道具。它应该代理您希望通过呈现Submit 按钮的外部配置的任何道具。我还建议将按钮类型明确声明为“提交”，或者在组件 API 中公开该道具。

您对onClick 处理程序的代理也会丢弃点击事件，如果任何消费组件关心它，则应该传递该事件。

class Submit extends Component {
  render() {
    const { disabled, onClick, type = "submit" } = this.props;
    return (
      <button
        className="button"
        disabled={disabled}
        onClick={onClick}
        type={type}
      >
        SUBMIT
      </button>
    );
  }
}

对于这样一个没有内部逻辑 IMO 的简单组件，函数式组件是更好的选择，我会更清楚地命名它。

const SubmitButton = ({ disabled, onClick, type = "submit" }) => (
  <button
    className="button"
    disabled={disabled}
    onClick={onClick}
    type={type}
  >
    SUBMIT
  </button>
);

现在，当您使用父组件中的提交按钮时，您可以根据需要/要求的任何条件传入 disabled 属性。

  render() {
    const { submitDisabled } = this.state;
    return (
      <div className="table">
        <div className="table-actions">
          {this.renderRefresh()}
          <SubmitButton
            disabled={submitDisabled} // <-- pass disabled value
            onClick={this.submitForm} // <-- attach click handler
            type="button" // <-- so we don't accidentally take default form action
          />
        </div>
      </div>
    );
  }
}

如何计算/设置this.state.submitDisabled 取决于您。例如，可能在提交表单时禁用它。

submitForm = () => {
  this.setState({ submitDisabled: true });
  ...
};

【讨论】：