Question

我试图用文本创建一个简单的按钮，如果用户点击它，它将更改其颜色和文本。这个带有文本的按钮显示在我的 Flatlist 中，如果点击了它，我现在可以更改其上的文本，但是问题是我的 Flatlist 中带有文本的其他按钮也改变。

我的目标是更改将被点击的单个按钮。

这是我的代码。

export default class tables extends Component {
    constructor(props){
        super(props)
        this.state = {
            data: [],
            ...
            toggle: true,
        }
    }
    _onPress() {
        const newState = !this.state.toggle;
        this.setState({ toggle: newState })
    }
    render() {
        const { toggle } = this.state;
        const textValue = toggle?"Available":"Occupied";
        const buttonBg = toggle?"dodgerblue":"white";
        const textColor = toggle?"white":"black";
        return (
            <View>
                <FlatList
                ....
                renderItem = {({ item }) => 
                    <View>
                        <Text>Table No: { item.tbl_id }</Text>

                        <TouchableHighlight
                        onPress = { () => this._onPress()}>
                            <Text>{textValue}</Text>              // Button with text
                        </TouchableHighlight>

                            <View>
                                <TouchableHighlight
                                ....>
                                    <Text>DINE-IN</Text>
                                </TouchableHighlight>

                                <TouchableHighlight
                                ....
                                    <Text>TAKE-OUT</Text>
                                </TouchableHighlight> 
                            </View>
                    </View>
                }
                />
            </View>
        )
    }
}

Answer 1

toggle: true,值必须在item

中

实际上，您的全部都会影响数据中存在的所有项目。您的商品应如下所示：

data: [
 { itemName: 'hi', toggle: false, id: 1 },
 { itemName: 'hey', toggle: false, id: 2 },
 // others items
]

然后，您的onPress：

 onPress = (id) => {
    const { data } = this.state
    data.forEach((elem) => {
      elem.toggle = false
      if (elem.id === id) {
        elem.toggle = true
      }
    })
    this.setState({ data })
  }

在地图上：

<TouchableHighlightonPress = { () => this._onPress(item.id)}>
<Text>{item.toggle ? "Available" : "Occupied"}</Text>

您可以通过将item.id存储在this.state.toggle中来实现另一种方式：

 onPress = (id) => {
   this.setState({ toggle: id })  
 }

<Text>{item.id === this.state.toggle ? "Occupied": "Available" }</Text>

React Native-在Flatlist中选择

1 个答案: