React Native Elements ButtonGroup — включить кнопку при выполнении условий

Я использую react-native-elements ButtonGroup с 3 кнопками. Мне нужно отключить все кнопки при запуске приложения, при выполнении условий мне нужно включить определенные кнопки.

Я отключил все кнопки, используя ложный флаг, но я не уверен, как включить определенные кнопки с условным оператором и состоянием.

Любая помощь будет оценена по достоинству.

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

react-native react-native-elements buttongroup
person Charl    schedule 26.08.2019    source источник
comment
Какие условия вы хотите?   -  person hong developer    schedule 26.08.2019
comment
Будет несколько условий, в основном, когда состояние функции изменяется, кнопка должна быть включена.   -  person Charl    schedule 26.08.2019

Ответы (2)


arrow_upward
0
arrow_downward

Вы можете сохранить отключенные кнопки в своем состоянии, например:

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
  }}/>
person gmaziashvili    schedule 26.08.2019
comment
Спасибо за ответ - person Charl; 27.08.2019

arrow_upward
0
arrow_downward

Как сказано в документах, отключите:

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 вы должны удалить/добавить свои кнопки так, как вам нужно:

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

person Auticcat    schedule 26.08.2019
comment
Спасибо за ответ - person Charl; 27.08.2019