时间戳

首页 > 解决方案 > 从 FlatList 中选择一个项目并将值传递给变量状态

javascript - 从 FlatList 中选择一个项目并将值传递给变量状态

问题描述

在我渲染 ListView 中的所有元素后，我想选择一项并将item.text值传递给var { category }但我的代码现在正在选择所有元素并且不知道如何传递值。有什么帮助吗？

_choosen(isSelected) {
  this.setState({
    selected: !isSelected,
  });
}
_categorySelected = () => {
  var { category } = this.state;
  console.log(category);
}
_renderList = ({ item }) => {
  let backgroundColor = this.state.selected ? "#000000" : "#ffffff";
  let fontWeight = this.state.selected ? "bold" : "normal";
  let showNext = this.state.selected ? "block" : "none";
  return (
    <TouchableHighlight
      selected={this.state.selected}
      onPress={() => this._choosen(this.state.selected)}
      underlayColor="#ffffff"
    >
      <View style={{ padding: 10, flexDirection: 'row' }}>
        <View style={{ backgroundColor: backgroundColor, width: 5, height: 25 }}></View>
        <Text style={{ marginLeft: 10, fontSize: 20, fontWeight: fontWeight }}>{item.text}</Text>
      </View>
    </TouchableHighlight>
  );
}

这是我的FlatList清单，jobCategory在构造函数中位于上层

<FlatList
  style={{ marginTop: 20 }}
  data={this.state.jobCategory}
  renderItem={this._renderList}
/>

编辑

constructor(props) {
    super(props);
    this.state = {
      jobCategory: [
        { key: '1', text: 'Barista & Bartender', value: 'Barista & Bartender' },
        { key: '2', text: 'Beauty & Wellness', value: 'Beauty & Wellness' },
        { key: '3', text: 'Careworkers & Health', value: 'Careworkers & Health' },
        { key: '4', text: 'Chef & Cook', value: 'Chef & Cook' },
        { key: '5', text: 'Cleaning', value: 'Cleaning' },
        { key: '6', text: 'Construction', value: 'Construction' },
        { key: '7', text: 'Driver & Courier', value: 'Driver & Courier' },
        { key: '8', text: 'Education', value: 'Education' },
        { key: '9', text: 'Events & Promotion', value: 'Events & Promotion' },
        { key: '10', text: 'Kitchen porter', value: 'Kitchen porter' },
        { key: '11', text: 'Office & Admin', value: 'Office & Admin' },
        { key: '12', text: 'Retail', value: 'Retail' },
        { key: '13', text: 'Sales & Marketing', value: 'Sales & Marketing' },
        { key: '14', text: 'Waiter or Waitress', value: 'Waiter or Waitress' },
        { key: '15', text: 'Warehouse', value: 'Warehouse' },
        { key: '16', text: 'Other', value: 'Other' }
      ],
      selected: false,
    };
    this._choosen = this._choosen.bind(this);
  }

标签： javascriptreact-native

解决方案

您有两个选择：要么为每个项目设置一组选定状态，要么通过传递选定行的 id 来“切换”状态。

在不了解您的整个结构的情况下，我建议您使用后一种：

在构造函数中：

this.state = {
  selectedItem: null,
};

然后在你的函数中：

_choosen(selectedItem) {
  this.setState({ selectedItem });
}

_renderList = ({ item }) => {
  const isSelected = (this.state.selectedItem === item.id);

  const backgroundColor = isSelected ? "#000000" : "#ffffff";
  const fontWeight = isSelected ? "bold" : "normal";
  const showNext = isSelected ? "block" : "none";

  return (
    <TouchableHighlight
      onPress={() => this._choosen(item.id)}
      underlayColor={"#ffffff"}
    >
      <View style={{ padding: 10, flexDirection: 'row' }}>
        <View style={{ backgroundColor, width: 5, height: 25 }}></View>
        <Text style={{ marginLeft: 10, fontSize: 20, fontWeight }}>{item.text}</Text>
      </View>
    </TouchableHighlight>
  );
}

当然，这要求您实际上有一个物品的id / 密钥（就像您应该拥有的那样）。如果您没有识别字段，那么这也可以keyExtractor通过使用 index 作为不同的值来实现（这不是最佳选择）：

<FlatList
  style={{ marginTop: 20 }}
  data={this.state.jobCategory}
  renderItem={this._renderList}
  keyExtractor={(item, index) => `item-${index}`}
/>

推荐阅读