Question

我正在尝试创建一个可扩展的列表组件。当我单击列表项时，我想更改它右边的图标。现在，当点击列表项时，每个图标都会更改。我只希望更改该特定项目的图标。是考虑了20分钟，并想我会寻求帮助。谢谢！

import { List, ListItem } from 'react-native-elements';

export default class ExpandingList extends Component {

  constructor(props){
    super(props)

    this.state = {
      visibleItems: false
    }
  }

  toggleMenu(){
    this.setState({
      visibleItems: !this.state.visibleItems
    })
  };

  render() {
    const list = "list 1, list 2, list 3";

    return (
    <View>
      <List>
        {
        list.map((item, i) => (
          <ListItem
            onPress={ () => this.toggleMenu() }
            key={i}
            rightIcon={this.state.visibleItems ? iconRight : iconDown}
            title={item} />
        ))
        }
      </List
    </View
    )


  }
}

Answer 1

您正在执行布尔值，并且所有列表项都在寻找相同的值。为了实现所需的值，您需要传递一个唯一值，在这种情况下，我正在使用索引，但理想情况下，除了索引之外，您还将拥有一个唯一的标识符。

下面应该能够满足您的需求

import { List, ListItem } from 'react-native-elements';

export default class ExpandingList extends Component {

  constructor(props){
    super(props)

    this.state = {
      visibleItems: null
    }
  }

  toggleMenu(itemIndex){
    this.setState({
      visibleItems: itemIndex
    })
  };

  render() {
    const list = "list 1, list 2, list 3";

    return (
    <View>
      <List>
        {
        list.map((item, i) => (
          <ListItem
            onPress={ () => this.toggleMenu(i) }
            key={i}
            rightIcon={this.state.visibleItems === i ? iconRight : iconDown}
            title={item} />
        ))
        }
      </List
    </View
    )


  }
}

注意：我假设您已经拥有此渲染，但对于其他人。列表const是用逗号分隔的字符串，并且该字符串没有映射功能。

上面的代码也没有考虑取消选择已经选择的列表项。可以通过检查状态中的值以及将其重置为空来确定状态是否相同。

Answer 2

这也是一种方法：

import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component {
  state = {
    visibleItem: 0
  };

  select = i => {
    this.setState({
      visibleItem: i
    });
  };

  render() {
    const items = [1, 2, 3, 4];

    return (
      <React.Fragment>
        {items.map((v, i) => {
          return (
            <div
              style={{ color: this.state.visibleItem === i ? "red" : "black" }}
              onClick={() => this.select(i)}
            >
              {v}
            </div>
          );
        })}
      </React.Fragment>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

工作示例here。

尝试更改单个列表项的图标

2 个答案: