Javascript 从平面列表中选择一个项目，并将该值传递到变量状态

在我呈现ListView中的所有元素后，我想选择一个项目并将

item.text

value传递给

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

编辑

---

您有两个选项：要么为每个项目设置一个选定状态数组，要么通过传递选定行的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来“切换”状态

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

在构造函数中：

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

---

查看我的构造函数现在只选择一个，但是如何从

类别中传递
selectedItem
变量的值
\u已选择类别
？
<FlatList
  style={{ marginTop: 20 }}
  data={this.state.jobCategory}
  renderItem={this._renderList}
  keyExtractor={(item, index) => `item-${index}`}
/>