reactjs通过一个不起作用的功能启用禁用按钮

Posted

技术标签:

【中文标题】reactjs通过一个不起作用的功能启用禁用按钮【英文标题】:reactjs enable disable button through a function not working 【发布时间】:2020-01-14 06:04:42 【问题描述】:

在 ReactJS 中,我想动态启用/禁用按钮。 为此,我创建了一个函数来从 state 中检查表单字段。 但它不起作用。

我试过下面的代码

render() 


    const canSave = true;  // Working

    // Not working
    const canSave = () => 
        const  paramCode, paramDesc, paramValue  = this.state.row;
        if (this.state.row && paramCode && paramDesc && paramValue) 
            return true;
        
        return false
    



    /* For Create Dialog  */
    let createDialogFooter = <div className="ui-dialog-buttonpane p-clearfix">
        <Button label="Save"  disabled=canSave />
    </div>;

控制台错误:-

    index.js:1375 Warning: Invalid value for prop `disabled` on <button> tag. Either remove it from the element, or pass a string or number value to keep it in the DOM. For details, see https : // fb.me/react-attribute-behavior
        in button (created by Button)
        in Button (at SearchPriceParameters.jsx:210)
        in div (at SearchPriceParameters.jsx:209)
        in div (created by Dialog)
        in div (created by Dialog)
        in Transition (created by CSSTransition)
        in CSSTransition (created by Dialog)
        in Dialog (at SearchPriceParameters.jsx:249)
        in div (at SearchPriceParameters.jsx:233)
        in SearchPriceParameters (created by Context.Consumer)
        in Route (at App.js:34)
        in Switch (at App.js:29)
        in div (created by Container)
        in Container (at App.js:28)
        in div (at App.js:27)
        in div (at App.js:16)
        in App (at src/index.js:15)
        in Router (created by BrowserRouter)
        in BrowserRouter (at src/index.js:14)

更新:-

感谢您的回答,现在下面固定的代码可以工作了。

render() 
    /** Enable / disable button */
    const canSave = () => 
        if (this.state.row) 
            const  paramCode, paramDesc, paramValue  = this.state.row;
            return (paramCode && paramDesc && paramValue);
        
        return false;
    


    /* For Create Dialog  */
    let createDialogFooter = <div className="ui-dialog-buttonpane p-clearfix">
        <Button label="Save" icon="pi pi-check" onClick=this.save className="p-button-warning" disabled=!canSave() />
    </div>;

【问题讨论】:

【参考方案1】:

这里有两个问题。

你永远不会返回false。试试这样。

const canSave = () => 
     const  paramCode, paramDesc, paramValue  = this.state.row;
     return (this.state.row && paramCode && paramDesc && paramValue)

你永远不会执行canSave

<Button label="Save"  disabled=canSave() />

【讨论】:

感谢它现在有效。我之前没有为 canSave() 使用括号【参考方案2】:

动态启用/禁用按钮的触发器是什么?

您是否正在更改状态中的值? 如果是这样,则附加一个带有现有状态的标志,指示按钮的禁用/启用值。

【讨论】:

【参考方案3】:

最好将函数移出渲染方法。

另外我认为您不需要再次检查 this.state.rowfalsy 值。

import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";

class App extends React.Component 
  state = 
    row:  paramCode: "hello" 
  ;
  canSave = () => 
    const  paramCode  = this.state.row;
    return paramCode;
  ;
  render() 
    let showButton = <button disabled=this.canSave()>Click me</button>;
    return <div className="App">showButton</div>;
  


const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

希望对你有帮助!!!

【讨论】:

非常感谢,我对何时使用内外感到困惑。我试过了,它给出了这个错误。 index.js:1375 警告:函数作为 React 子级无效。如果您从渲染返回一个组件而不是 ,则可能会发生这种情况。或者您可能打算调用这个函数而不是返回它。 感谢搬家也可以。我在按钮内使用这个关键字访问它... disabled=!this.canSave()。最后,哪种方法是最佳实践。将代码保留在渲染之外? 函数应该在渲染之外有很多原因,但有时这只是个人喜好 - 请参阅this link 支持渲染之外的函数。

以上是关于reactjs通过一个不起作用的功能启用禁用按钮的主要内容,如果未能解决你的问题,请参考以下文章

jquery:重置后禁用/启用按钮不起作用

字段启用禁用javascript不起作用

如果指定了文本颜色,则禁用按钮在 React JS 中不起作用

禁用文本框后 JQuery UI 自动完成功能不起作用

按钮不会显示禁用的样式

在 UITextView 中禁用复制功能不起作用