javascript - 项目数组中单个项目的切换图标

Question

我正在尝试切换一个很棒的字体图标来选择或不喜欢radio button。我能够将其设置为 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>
        )}


}

This is the icon for an unselected item

This is the icon for a selected item

Answer 1

您首先需要为每个图标设置单独的标志。

由于依赖关系，我无法测试以下代码，但您可以这样做:

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

如果这有帮助，请告诉我。