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

Question

在 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>;

Answer 1

这里有两个问题。

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

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

你永远不会执行 canSave

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