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

Question

这是我在react中的第一个应用程序，我不知道如何禁用导入的按钮。我有一个组件按钮，我将其导入父组件

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;

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

Answer 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>
);
}
}

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

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