React Native Elements ButtonGroup - 满足条件时启用按钮

Question

我正在使用带有 3 个按钮的 react-native-elements ButtonGroup。我需要在应用程序启动时禁用所有按钮，当满足条件时，我需要启用特定按钮。

我已经使用 false 标志禁用了所有按钮，但我不确定如何使用条件语句和状态启用特定按钮。

如有任何帮助，我们将不胜感激。

<ButtonGroup
  onPress={this.updateIndex}
  selectedIndex={selectedIndex}
  buttons={buttons}
  containerStyle={{ height: 100 }}
  //disabled={[0, 1, 2]}
  disabled={true}
/>

ADD_DETAILS(index) {
  if (index === 0) {
    console.log("clicked 0");
    this.requestDetails();
  }
}

Answer 1

如文档所述，禁用：

Controls if buttons are disabled. Setting true makes all of them disabled, while using an array only makes those indices disabled.

所以创建一个像这样的结构：

disabled={[1,2]}

只会启用第一个按钮

要更新它，您应该使用状态变量并根据您的需要更新它，例如：

this.state={
   disabled=[0]
}

那么禁用的道具看起来像：

disabled={this.state.disabled}

并且在你的 onPress 函数中你应该 remove/add 你的按钮是你需要的：

onPress={this.buttonGroupOnPress}

这会将单击按钮的索引作为参数发送到函数：

buttonGroupOnPress = (index) =>{
   //your logic
   this.setState({ disabled: /* the new array of disabled buttons indexes */ })
}

来源：https://react-native-training.github.io/react-native-elements/docs/button_group.html#disabled

Answer 2

您可以将禁用的按钮存储在您所在的州例如：

this.state = {
  selectedIndex: 2,
  disabled:[], // you store your disabled buttons here
}

<ButtonGroup
 onPress={this.updateIndex}
 selectedIndex={selectedIndex}
 buttons={buttons}
 containerStyle={{height: 100}}
 disabled={this.state.disabled}
/>

如果你有这样的 ButtonGroup，你可以像这样禁用按钮（例如按钮单击时的第一个和第三个）：

  <Button
  title={"disable first and third buttons"}
  onPress={()=>{
    this.setState({disabled:[0,2]}); // here you update which buttons you want to disable
  }}/>

React Native Elements ButtonGroup - 满足条件时启用按钮

React Native Elements ButtonGroup - Enable button when conditions are met

buttongroup

react-native

react-native-elements