NodeJS 单击平面列表数据...可单击的数据显示在平面列表顶部

y1aodyip 于 2022-12-12 发布在 Node.js

关注(0)|答案(1)|浏览(143)

const Home = () => {
  const [display, setDisplay] = useState(1);

  const managedList = [
    { name: "John Doe1" },
    { name: "John Doe2" },
    { name: "John Doe3" },
    { name: "John Doe4" },
    { name: "John Doe5" },
    { name: "John Doe12" },
    { name: "John Doe13" },
    { name: "John Doe14" },
    { name: "John Doe15" }

  ];
  return (
    <View style={{ flex: 1 }}>
      <FlatList
        data={managedList}//{managedList.slice(display - 1, display)}
        keyExtractor={mohan => mohan.name}
        renderItem={({ item }) => {
          return <TouchableOpacity style={styles.menuStyle} onPress={() => {
            setDisplay(display + 1);
          }}><Text>{item.name}</Text></TouchableOpacity>
        }}
      />

      {/* <Button
                title="Show Next"
                onPress={() => 
                    {
                    setDisplay(display + 1);
                }}
            /> */}
    </View>
  );
};

这是我的代码

我想要这样的输出...

如果我单击John Doe12数据，此数据将显示在页面顶部，如...
我点击John Doe12这个数据来代替Josh Doe1
和Josh Doe1的数据转移到Josh Doe2的位置
和Josh Doe2数据到Josh Doe3的下一级位置

这是我的输出

node.js

来源：https://stackoverflow.com/questions/74724453/click-flatlist-data-clickable-data-appear-top-of-the-flatlist

1条答案

按热度按时间

wa7juj8i1#

你可以这样做。用一个状态来存储显示数据。当一个对象被单击时，通过所选对象和剩余的列表重新创建一个数组。

函数组件

const managedList = [
    { name: "John Doe1" },
    { name: "John Doe2" },
    { name: "John Doe3" },
    { name: "John Doe4" },
    { name: "John Doe5" },
    { name: "John Doe12" },
    { name: "John Doe13" },
    { name: "John Doe14" },
    { name: "John Doe15" }
  ];

  const [displayList, setDisplayList] = useState(managedList);

  return (
    <View style={{ flex: 1 }}>
      <FlatList
        data={displayList}
        keyExtractor={mohan => mohan.name}
        renderItem={({ item }) =>
          <TouchableOpacity
            style={styles.menuStyle}
            onPress={() => {
              setDisplayList([
                item,
                ...displayList.filter(obj => obj != item)
              ])
            }}
          >
            <Text>{item.name}</Text>
          </TouchableOpacity>
        }
      />
    </View>
  );

--------------------------------编辑---------------

类组件

export default class DemoScreen extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      displayList: [
        { name: "John Doe1" },
        { name: "John Doe2" },
        { name: "John Doe3" },
        { name: "John Doe4" },
        { name: "John Doe5" },
        { name: "John Doe12" },
        { name: "John Doe13" },
        { name: "John Doe14" },
        { name: "John Doe15" }
      ]
    }
  }

  render() {
    return (
      <View style={{ flex: 1 }}>
        <FlatList
          data={this.state.displayList}
          keyExtractor={mohan => mohan.name}
          renderItem={({ item }) =>
            <TouchableOpacity
              style={styles.menuStyle}
              onPress={() => {
                this.setState({
                  displayList: [
                    item,
                    ...this.state.displayList.filter(obj => obj != item)
                  ]
                })
              }}
            >
              <Text>{item.name}</Text>
            </TouchableOpacity>
          }
        />
      </View>
    );
  }
}

赞(0）回复(0）举报 2022-12-12

我来回答

NodeJS 单击平面列表数据...可单击的数据显示在平面列表顶部

这是我的代码

这是我的输出

1条答案

相关问题

热门标签

最新问答