Question

所以我有一个名为AddButton的组件

export default class AddButton extends React.Component {
  constructor(props) {
    super(props);
  }

  addItem(e) {
    this.btn.setAttribute('disabled', 'disabled');
    this.props.addItem(e.target.getAttribute('data-row-index'))
  }

  render() {
    return (
      <div className="row">
        <div className="col-md-12 text-center">
          <button ref={btn => {this.btn = btn }} className="btn btn-success" onClick={this.addItem.bind(this)} data-row-index={this.props.rowIndex}>Add</button>
        </div>
      </div>
    )
  }
}

我在代码中还有其他地方：

if (this.props.addButton) {
  rows.push(
    <td key="add">
      <AddButton
        addItem={this.props.addItem}
        rowIndex={this.props.rowIndex}
      />
    </td>
  )
}

所以我一次在行尾的表中有50个。单击一个按钮后，我想禁用所有按钮。

您可以在addItem(e)中看到我已经完成了：

addItem(e) {
  this.btn.setAttribute('disabled', 'disabled');
  this.props.addItem(e.target.getAttribute('data-row-index'))
}

但是当我对此进行测试时，仅单击一个按钮后该按钮被禁用。我希望他们全部禁用

有什么办法可以修改它来实现？

Answer 1

反应组件具有类似于HTML DOM的语法，但它们不是，它们是模块，并且每次在表中使用该模块时（例如），它将是该模块的新实例。因此，如果要在它们之间共享状态，则必须将其作为道具传递给它们，并且不应将它们视为HTML节点。

禁用点击按钮后的所有按钮

1 个答案: