使用功能在 React JS 中禁用/启用提交按钮答案

【问题标题】：Disable/Enable submit button in React JS USING FUNCTION使用功能在 React JS 中禁用/启用提交按钮
【发布时间】：2018-07-30 23:30:17
【问题描述】：

我想使用函数禁用/启用表单提交按钮。
这是我的代码来解释我想要什么：

isDisabled = () => {
    //logic to define if button should be disabled or not
    //return boolean true or false based on that
}


render() {
    return (
        <form className="forgot-password-form">
            //form fields
            <input type="submit" value="Submit" disabled={this.isDisabled} />
        </form>
    );
}

这只是为了说明我想要做什么:) 当然render() 将在组件中。

目前它给了我警告：

警告：标签上的 prop disabled 值无效。要么将其从元素中移除，要么传递一个字符串或数值以将其保留在 DOM 中。

感谢大家的帮助。

【问题讨论】：

你在使用 onSubmit 吗？如果是这样，您可以只使用一个助手来返回您想要执行的代码（如果未禁用），如果禁用它只会运行一个返回 false 的函数
codesandbox.io/s/n95yyov50
onSubmit 将在您单击提交时运行，如果表单不满足某些条件，我不想让用户单击提交按钮。有点像开箱即用的角度无效功能。
@ RIYAJ KHAN 我不明白这如何回答我的问题 :) 你总是禁用它并调用 onClick 函数：D
如果可以在表单输入为空的时候禁用，可以通过状态检查，比如this

标签： reactjs

【解决方案1】：

您将一个函数传递给 disabled 属性，您必须执行此函数才能传递此函数的布尔结果：

<input type="submit" value="Submit" disabled={this.isDisabled()}

【讨论】：

我现在不在系统中，但我想它会起作用。所以+1并接受。谢谢！

【解决方案2】：

    <meta charset="UTF-8">
    <script src="https://unpkg.com/react@0.13.3/dist/react.js"></script>
    <script src="https://unpkg.com/react@0.13.3/dist/JSXTransformer.js"></script>
    <div id="app"></div>
    <script type="text/jsx;harmony=true">void function() { "use strict";

var App = React.createClass({
  getInitialState() {
    return {}
  },
  isDisabled(){
    return true;   // for disable button return true otherwise false
   // return false;
  },
  render() {
    return <div>
<input type="submit" value="Submit" disabled={this.isDisabled()}/>
    
    </div>
  }
})

React.render(<App/>, document.getElementById('app'))

}()</script>

【讨论】：

谢谢，但我已经接受了 Dyo 的回答，这是相同的。不过也谢谢你的。 +1。