如何从子反应组件继承的反应组件中禁用按钮？答案

【问题标题】：How to disable a button from react component inherited by a child react component?如何从子反应组件继承的反应组件中禁用按钮？
【发布时间】：2021-02-19 22:25:36
【问题描述】：

我有一个子反应组件，它扩展了父反应组件。

子组件是一个表单，它从父组件继承了一个保存表单的按钮。

在某些情况下，如果子组件中的表单验证失败，则应禁用父组件的保存按钮。

如何从子组件中禁用该父按钮？

这是父渲染函数的样子：

render() {
return (
  <Modal open={this.props.open} onClose={this.props.onClose.bind(this.props.parent)}>
      <Modal.Content>
        <Modal.Description>
          {this.getDescription()}
        </Modal.Description>
      </Modal.Content>
      <Modal.Actions>
        <Button className="buttontype1" onClick={this.props.onSave.bind(this.props.parent)}>{this.getLocalValue('savebutton', 'Save')}</Button>
        <Button className="buttontype2" onClick={this.props.onClose.bind(this.props.parent)}>{this.getLocalValue('cancelbutton', 'Cancel')}</Button>
      </Modal.Actions>
    </Modal>
);

}

或者是否可以覆盖父母的 onSave？

谢谢。

【问题讨论】：

我对你所说的“扩展”感到困惑，但如果你的意思是一个组件的类扩展另一个，那么you don’t want to do that

标签： reactjs

【解决方案1】：

您可以在父组件中设置状态并将此条件传递给子按钮，如下所示：

父母：

import React, { useState } from 'react';
import Child from '../path-to/Child';

const Parent = () => {
   const [condition, setCondition] = useState(false);

   return <Child condition={condition} />;
}

**孩子：**

import React, { useState } from 'react';

const Child = ({condition, setParent}) => {
    const handleValidate = () => {
        let condition = true;   
        setParent(condition);    
    }

    return <button disabled={condition} setParent={setCondition} />;
}

【讨论】：