reactjs - Создать переключатель для динамически создаваемых кнопок

Question

В настоящее время я столкнулся с проблемой с JS / React / React-Native. Я беру категории из API и делаю кнопки из результатов (они часто меняются в зависимости от разных переменных в URL-адресе). Код, который я использую для этого, выглядит следующим образом:

const cats = singles.map((d) => {
return (
  <TouchableOpacity key={d} style={styles.Settingcats}><Text style={{color: '#f55f44'}}>{d}</Text></TouchableOpacity>
)}

Я хочу, чтобы динамически генерируемые кнопки можно было переключать в приложении. Когда я попытался использовать состояния с помощью следующего кода:

const cats = singles.map((d) => {
return (
  <TouchableOpacity key={d} onPress={ _ => this.changeStyle} style={this.state.style === 0 ? styles.Settingcats : styles.SelSettingcats}><Text style={{color: '#f55f44'}}>{d}</Text></TouchableOpacity>
)}

И понял, что, поскольку это относится к одному состоянию для всех кнопок, это изменит все стили кнопок. Поэтому я попытался немного отойти от рамки и подумал об использовании идентификатора в качестве имени состояния, создании состояния и использовании состояния через внешнюю функцию для изменения его значения.

const cats = singles.map((d) => {
return (
  <TouchableOpacity key={d} onPress={ _ => this.changeStyle(d)} style={this.state([d]) === 0 ? styles.Settingcats : styles.SelSettingcats}><Text style={{color: '#f55f44'}}>{d}</Text></TouchableOpacity>
)}
changeStyle(d){
  this.setState({
    [d] : 1
})}

Это вызывает ошибку, потому что состояние используется как функция.

Какие методы можно использовать, чтобы динамически создаваемые кнопки имели собственные отдельные события переключения?

Другие вещи, которые я пробовал: пользовательские переключатели, материальный интерфейс, но я застрял на той же проблеме, когда дело доходит до наличия уникальных функций для переключаемых кнопок.

javascript reactjs

0

Brandon 23 Окт 2018 в 19:46

Answer 1

Метод, который я использовал для достижения этой цели, за что я благодарен @simbathesailor.

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

this.state[d]

Где d была динамической переменной, которую я создал с помощью компонента TouchableOpaque.

0

Brandon 24 Окт 2018 в 02:05

Answer 2

Вместо того, чтобы пытаться управлять списком состояний на верхнем уровне, переместите TouchableOpacity в компонент, который обрабатывает состояние переключения внутри.

class MyButton extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
        toggle: false
    }
    this.setToggle = this.setToggle.bind(this);
  }

  setToggle(){
    this.setState({
        toggle: !this.state.toggle
    })
  }

    render(){
    return <TouchableOpacity onClick={this.setToggle} className={this.state.toggle ? 'red' : 'blue'}>{this.props.name}</TouchableOpacity>
  }
}

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

Вот пример скрипки: https://jsfiddle.net/n5u2wwjg/220149/

1

Will 23 Окт 2018 в 18:08

reactjs - Создать переключатель для динамически создаваемых кнопок

2 ответа

Похожие вопросы

Новые вопросы

javascript