Значок переключения для одного элемента в массиве элементов - PullRequest
Новая
       0

Значок переключения для одного элемента в массиве элементов

0 голосов
/ 15 ноября 2018

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

export default class ItemDetails extends Component {
    constructor() {
    super();

    this.state = {
        items: [
            {name: 'Bread Cheese', options: ['Monterrey Jack', 'Cheddar']}, 
            {name: 'Combo Side', options: ['Fries', 'Sprouts', 'Sweet Potato Fries', 'Tots']},
            {name: 'Sandwich Details', options: ['No Tomatoes', 'No sauce', 'Extra Cheese', 'Extra Onions']},
            {name: "It's a wrap", options: ['gluten free', 'extra sauce', 'extra cheese', 'extra lettuce', 'extra pilaf']}
        ],
        show: false,
     };


    toggle() {
        this.setState({ show: !this.state.show });
    }


    renderRadioButton = (item) => {
        let iconSolid = <Icon name="circle" color="darkgray" type='solid'/>,
            iconLight = <Icon name="circle" color="darkgray" type='light'/>;
        return (
            <View>
                {item.options.map(option =>
                  <ListItem selected={false} onPress={this.toggle.bind(this)}>
                    <View style={styles.icon}>
                     {this.state.show ? iconSolid : iconLight}
                    </View>
                    <Text style={styles.iconPadding}>{option}</Text>
                  </ListItem>)}
            </View>
          );
       };
    };


    render() {
        return(
            <View style={styles.content}>
                <View>{this.renderRadioButton(this.state.items[0])}</View>
            </View>
        )}


}

Это значок для невыбранного элемента

Это значок для выбранного элемента

1 Ответ

0 голосов
/ 15 ноября 2018

Сначала вам нужно иметь отдельные флаги для каждого значка.

Я не смог протестировать следующий код из-за зависимостей, но это то, что вы можете сделать: 

 constructor() {
    super();

    this.state = {
      items: [
        { name: 'Bread Cheese', options: ['Monterrey Jack', 'Cheddar'] },
        { name: 'Combo Side', options: ['Fries', 'Sprouts', 'Sweet Potato Fries', 'Tots'] },
        { name: 'Sandwich Details', options: ['No Tomatoes', 'No sauce', 'Extra Cheese', 'Extra Onions'] },
        { name: "It's a wrap", options: ['gluten free', 'extra sauce', 'extra cheese', 'extra lettuce', 'extra pilaf'] }
      ],
      show: {},
    };
  } 

toggle(option) {
    this.setState((prevState) => {
      if (prevState.show[option]) {
        return {
          ...prevState,
          show: { ...prevState.show, [option]: !prevState.show[option] }
        }
      } else {
        return {
          ...prevState,
          show: { ...prevState.show, [option]: true }
        }
      }
    });
  }


  renderRadioButton = (item) => {
    let iconSolid = <Icon name="circle" color="darkgray" type='solid' />,
      iconLight = <Icon name="circle" color="darkgray" type='light' />;
    return (
      <View>
        {item.options.map(option =>
          <ListItem selected={false} onPress={this.toggle.bind(this, option)}>
            <View style={styles.icon}>
              {this.state.show[option] ? iconSolid : iconLight}
            </View>
            <Text style={styles.iconPadding}>{option}</Text>
          </ListItem>)}
      </View>
    );
  };

Дайте мне знать, если это поможет.

...