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.row
的 falsy
值。
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 子级无效。如果您从渲染返回一个组件而不是以上是关于reactjs通过一个不起作用的功能启用禁用按钮的主要内容,如果未能解决你的问题,请参考以下文章