Question

我尝试使用两个按钮创建一个切换按钮组件，其中单击一个禁用另一个按钮，反之亦然。我有一个残疾人状态我知道我必须切换。但我不确定如何平衡逻辑。因为有两个按钮，是否应该有一个或两个禁用状态？

$ pg_conftool -s 10 main show hba_file
[OUT] /etc/postgresql/10/main/pg_hba.conf

$ sudo cat /etc/postgresql/10/main/pg_hba.conf
    [OUT] local   all             postgres                              peer
          local   all             all                                   md5
          host    all             all             127.0.0.1/32          md5
          host    all             all             ::1/128               md5

Answer 1

这应该做：

constructor(props) {
  super(props);
  this.state = { button1Disabled: false }
}

clicky() {
  this.setState(prevState => ({
    button1Disabled: !prevState.button1Disabled
  }));
}

render () {
  return (
    <div onClick={this.clicky.bind(this)}>
      <button disabled={this.state.button1Disabled}>Item 1</button>
      <button disabled={!this.state.button1Disabled}>Item 2</button>
    </div>
  )
}

Answer 2

Dane到目前为止得到了最好的答案（在我看来），我的答案与他的答案非常相似。虽然我想提出一些进一步的建议：

首先是将事件监听器移出div并将其附加到每个按钮上。改善可访问性的主要原因（例如屏幕阅读器）因为div，p等静态元素没有语义含义。此外，让实际的按钮触发某种东西更有意义，而不是按钮包装。
我的第二个建议是将您的clicky()函数绑定到构造函数中。这将阻止您的组件在每次重新渲染时绑定，而只会在组件安装时执行此操作。

以下是Danes解决方案的轻微修改版本：

constructor(props) {
  super(props);
  this.state = { button1Disabled: false }
  this.clicky = this.clicky.bind(this);
}

clicky() {
  this.setState(prevState => ({
    button1Disabled: !prevState.button1Disabled
  }));
}

render () {
  return (
    <div>
      <button onClick={this.clicky} disabled={this.state.button1Disabled}>Item 1</button>
      <button onClick={this.clicky} disabled={!this.state.button1Disabled}>Item 2</button>
    </div>
  )
}

Answer 3

不是保留布尔值，而是将按钮标识符保持在禁用状态，这可以扩展到任意数量的按钮而不是仅仅两个

constructor(props) {
    super(props);
    this.state = { disabled: "1" }
}

clicky(e) {
  //should dictate the toggle logic
  const id = e.target.id
  this.setState({ disabled: id })
}

render () {
  <div onClick={this.clicky.bind(this)}>
    <button disabled={this.state.disabled === "1"} id="1">Item 1</button>
    <button disabled={this.state.disabled === "2"} id="2">Item 2</button>
  </div>
}

<强> Working demo

Answer 4

由于按钮是反向相关的，因此一个状态是更好的主意，因为有两个变量，它们可能会失去同步。此外，由于一次只启用一个按钮，因此管理状态很简单，只需在每次单击按钮时切换状态：

constructor(props) {
     super(props);
     this.item1 = React.createRef();
     this.item2 = React.createRef();
     this.state = { enableFirst: true }
   }

clicky(e) {
  const enableFirst = e.target !== item1;
  this.setState({ enableFirst });
}

render () {
 <div onClick={this.clicky.bind(this)}>
   <button ref={item1} disabled={this.state.enableFirst}>Item 1</button>
   <button ref={item2} disabled={!this.state.enableFirst}>Item 2</button>
 </div>
}

React中的按钮切换

4 个答案: