Question

我有带有颜色和4视图容器的列表。我正在View的第四个Flatlist容器中显示来自listy的项目。我想从单击的colorList更改color上第4个View容器的背景色。我有onClickList函数，但是我不知道如何获取item.key并传递给onClickList函数。

const colorList = [
    { key: '1', value: 'blueviolet' },
    { key: '2', value: 'chartreuse' },
    { key: '3', value: 'cyan' },
    { key: '4', value: 'darggrey' },
    { key: '5', value: 'gold' },
    { key: '6', value: 'khaki' },
    { key: '7', value: 'lawngreen' },
    { key: '8', value: 'orange' },
    { key: '9', value: 'palevioletred' },
    { key: '10', value: 'yellow' },
];

    export default class App extends React.Component {
    constructor(props) {
        super(props);    
        this.state = { clicks: 0, color: 'blue', changeBackgroundColor: 'green', changeBackgroundColorList: 'green'};      
    }

    increase = this.increase.bind(this)
    decrease = this.decrease.bind(this)

    increase() {
        this.setState({ color: 'white' });
        this.setState(previousState => ({ clicks: previousState.clicks + 1 }));
    } 

    decrease() {
        this.setState({ color: 'white' });
        if (this.state.clicks > 0)
            this.setState(previousState => ({ clicks: previousState.clicks - 1 }));
    } 

    onLongClick = this.onLongClick.bind(this);
    onClick = this.onClick.bind(this);

    onLongClick() {
        this.setState({ changeBackgroundColor: 'white'  });
    }

    onClick() {
        var randomColor = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
        this.setState({ changeBackgroundColor: randomColor });
    }

    getKeyByValue = this.getKeyByValue.bind(this)

    getKeyByValue(object, value) {
        return Object.keys(object).find(key => object[key] === value);
    }

    onClickList = this.onClickList.bind(this);

    onClickList(item) {
        Alert.alert(item.key)
        this.setState({ changeBackgroundColorList: colorList[item.key].value });
    }

    render() {
        return (
            <View style={{ flex: 1 }}>
                <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                    <Text>{"\n"}</Text>
                    <Text style={styles.header}>Klikacz</Text>
                </View>
                <View style={{ flex: 3, justifyContent: 'center' }}>
                    <Text style={styles.counter}>Liczba klikniec: {this.state.clicks}</Text>
                    <Text>{"\n"}</Text>
                    <View style={styles.buttons}>
                        <Button title="Dodaj" onPress={this.increase} />
                        <Text>{"\t"}</Text>
                        <Button title="Odejmij" onPress={this.decrease} />
                    </View>
                </View>
                <View style={{ flex: 3, justifyContent: 'center', alignItems: 'center', backgroundColor: this.state.changeBackgroundColor }}>
                    <TouchableOpacity onPress={this.onClick} onLongPress={this.onLongClick}>
                        <Text>
                            <Text style={styles.changeText}>Zmien tlo</Text>
                        </Text>
                    </TouchableOpacity>
                </View>
                <View style={{ flex: 2, justifyContent: 'center', alignItems: 'center', backgroundColor: this.state.changeBackgroundColorList }}>
                    <FlatList
                        data={colorList}
                        renderItem={({ item }) =>
                            <Text style={styles.item} onPress={selectColor.bind(this, item)}>{item.value}</Text>}
                    />
                </View>
            </View>
        );
    }
}

Answer 1

尝试一下

onClickList = (index) => {
   Alert.alert(colorList[index].key)
   this.setState({ changeBackgroundColorList: colorList[index].value });
}


<FlatList
    data={colorList}
    renderItem={({ item, index }) =>
    <Text style={styles.item} onPress={() => this.onClickList(index)}>{item.value}</Text>}
/>

反应列表中项目的本机更改背景颜色

1 个答案: