Question

单击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();
}

由于我正在使用Redux，所以

function1通过map dispatch传递给props。代码的其他部分工作正常。 Button1正在被正确禁用，以便显示this.props.submitting正在由我的Redux操作＆amp;正确设置。减速器。这似乎是一个HTML问题。

Answer 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})

}

反应JSX中禁用按钮

1 个答案: