禁用数组中的按钮[重复]答案

【问题标题】：disable buttons that are in the array [duplicate]禁用数组中的按钮[重复]
【发布时间】：2019-07-23 10:59:08
【问题描述】：

我只想禁用数组中房间的按钮，如下所示。数组在我的状态，this.state ={ disableRoom:["room02", "room03", "room04", "room05"] }


     <Row>
                                {this.state.rooms.map((roomName, i) =>

                                    <Col>
                                        <Button disabled={this.state.disableRoom} >
                                            {roomName}
                                        </Button>
                                    </Col>
                                )}
    </Row>

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

您可以对数组使用.includes() 方法来检查roomName 是否存在于disablRoom 数组中。它返回一个布尔值，您可以将其设置为disabled 属性。像这样的

 <Row>
   {this.state.rooms.map((roomName, i) =>
     <Col>
       <Button disabled={this.state.disableRoom.includes(roomName)}> {roomName}</Button>
     </Col>
   )}
 </Row>

通知disabled={this.state.disableRoom.includes(roomName)}。

【讨论】：

【解决方案2】：

尝试以这种方式进行 this.state = {rooms: [{name:'room1', isDisabled:true}, {name:'room2', isDisabled:false}, {name:'room3', isDisabled:true}, {name:'room4', isDisabled:false}]};

<Row>
   {this.state.rooms.map((room) =>
   <Col>
      <Button disabled={room.isDisabled}>{ room.name }</Button>
   </Col>
   )}
</Row>

用你想要的属性替换房间对象。

【讨论】：

【解决方案3】：

您可以使用find 方法来查找roomName 是否存在于disableroom 数组中，如下所示：

class App extends React.Component {
  constructor(){
    super()
    this.state={
      rooms:["room12","room10","room13","room15","room02", "room03", "room04", "room05"],
      disableRoom:["room02", "room03", "room04", "room05"] 
    }
  }

render(){
  return (
    <div className="App">
     <Row>
     {this.state.rooms.map((roomName, i) =>
       <Col>
              <Button disabled={this.state.disableRoom.find(el=>el===roomName?true:false)} >
                {roomName}
               </Button>
        </Col>
      )}
    </Row>
    </div>
  );
}
}

【讨论】：