Question

在我渲染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);
  }

Answer 1

您有两种选择：要么每个项目都有一个选定状态数组，要么就是＆＃34;切换＆＃34;传递所选行的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 / key （就像你应该拥有的那样）。如果您没有识别字段，那么也可以使用keyExtractor将索引作为一个不同的值（这不是最佳选项）来实现：

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

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

1 个答案: