禁用反应JSX中的按钮答案

【问题标题】：disable button in react JSX禁用反应JSX中的按钮
【发布时间】：2017-03-09 02:27:34
【问题描述】：

单击 Button1 后，我试图禁用多个按钮。但只有 Button1 被禁用，而 Button2 则不是。请帮忙。谢谢！

    <button disabled={this.props.submitting} className="button1" type="submit" onClick={(e)=>this._handleButton1(e)}>
        <IndexLink activeClassName="activeLink" to='/button1'>Button1</IndexLink>
    </button>

    <button disabled={this.props.submitting} className="button2" type="button" onClick={(e)=>this._handleButton2(e)}>
        <IndexLink activeClassName="activeLink" to='/button2'>Button2</IndexLink>
    </button>

_handleButton1 和 _handleButton2 是这样的：

_handleButton1(e) {
    e.preventDefault();
    this.props.function1();
}

function1 通过 map dispatch 传递给 props，因为我使用的是 Redux。代码的其他部分工作正常。 Button1 被正确禁用，因此表明我的 Redux 操作和减速器正确设置了 this.props.submitting。这似乎是一个 HTML 问题。

【问题讨论】：

无法理解这个sn-p，请添加更多函数定义。
如果您在按钮上使用onClick 事件来调用_handleButton1 函数，那么为什么需要在表单的onSubmit 上调用它。你也可以添加你的_handleButton1函数的定义

标签： javascript html reactjs

【解决方案1】：

我找到了一个值得分享的解决方案。这行得通。

render() {
    let buttons;
    if (!this.props.submitting) {
     buttons = (
        <div>
            <button className="button1" type="submit" onClick={(e)=>this._handleButton1(e)}>
               <IndexLink activeClassName="activeLink" to='/button1'>Button1</IndexLink>
            </button>

            <button className="button2" type="button" onClick={(e)=>this._handleButton2(e)}>
               <IndexLink activeClassName="activeLink" to='/button2'>Button2</IndexLink>
            </button>
        </div>
    )} else {
        buttons = (
        <div>                   
            <button disabled>Submit</button>
            <button disabled>Expenses</button>
        </div>
    )}
    return ({button})

}

【讨论】：