gpt4 book ai didi

javascript - 如何在按钮列表上聚焦/模糊事件 react 原生

转载 作者:行者123 更新时间:2023-12-04 10:41:56 24 4
gpt4 key购买 nike

我正在尝试在 native react 中模拟焦点/模糊事件,但没有成功。我有两个组件,Home 和 Button。在家里,我呈现一个按钮列表(类别 1、类别 2 和类别 3)。
这是我的代码:

---家庭组件----

state = {
categories: ['category1', 'category2', 'category3']
};

renderCategories() {
return this.state.categories.map((category, index) => (
<Button onPress={() => this.getCategories(category)} key={index}>
{category}
</Button>
));
}

render() {
return (
<View>
<ScrollView horizontal showsHorizontalScrollIndicator={false} style={{marginBottom: 5}}>
{this.renderCategories()}
</ScrollView>
</View>

)
}

---按钮组件---
class Button extends Component {
constructor(props) {
super(props);
this.state = { pressStatus: false };
}

_onHideUnderlay() {
this.setState({ pressStatus: false });
console.log('unpressed')
}
_onShowUnderlay() {
this.setState({ pressStatus: true });
console.log('pressed')
}

render () {

const {buttonStyle, buttonPressedStyle, textStyle} = styles;
return (
<TouchableHighlight onPress={this.props.onPress}
underlayColor={'#fff000'}
activeOpacity={1}
style={[buttonStyle, this.state.pressStatus ? {backgroundColor: '#fff000'} : {backgroundColor: '#1D36FF'}]}
// onHideUnderlay={this._onHideUnderlay.bind(this)}
onShowUnderlay={this._onShowUnderlay.bind(this)}>
<Text style={textStyle}>
{this.props.children}
</Text>
</TouchableHighlight>
);
}


}

const styles = {
buttonStyle: {
marginTop:10,
paddingTop:15,
paddingBottom:25,
marginLeft:10,
// marginRight:10,
paddingLeft: 15,
paddingRight: 15,
backgroundColor:'rgba(99,99,99,0.99)',
borderRadius:10,
borderWidth: 1,
borderColor: '#fff'
},
buttonPressedStyle: {
marginTop:10,
paddingTop:15,
paddingBottom:25,
marginLeft:10,
// marginRight:10,
paddingLeft: 15,
paddingRight: 15,
backgroundColor:'rgba(15,15,15,0.99)',
borderRadius:10,
borderWidth: 1,
borderColor: '#fff'
},
textStyle: {
color:'#fff',
textAlign:'center',
fontSize: 16
},
};

此代码部分工作。当我单击第一个按钮(类别 1)时,它会按预期更改背景颜色,但是当我单击第二个按钮(类别 2)时,按钮类别 1 应采用初始样式(失去焦点)。

请帮忙。谢谢

最佳答案

@Aramillo,您正面临此问题,因为您使用的是相同的属性值 pressStatus对于所有三个按钮。

用一些不同的方式来做。

请尝试以下代码 -

App.js

import React, { Component } from "react";
import { ScrollView, Text, View } from "react-native";
import Button from "./Button";

class App extends Component {
constructor(props) {
super(props);
this.state = {
pressedButton: null,
categories: ["category1", "category2", "category3"]
};
}

getCategories = (category, index) => {
this.setState({ pressedButton: index });
};

renderCategories() {
return this.state.categories.map((category, index) => (
<Button
onPress={() => this.getCategories(category, index)}
buttonId={index}
pressedButton={this.state.pressedButton}
key={index}
>
<Text>{category}</Text>
</Button>
));
}

render() {
return (
<View>
<ScrollView
horizontal
showsHorizontalScrollIndicator={false}
style={{ marginBottom: 5 }}
>
{this.renderCategories()}
</ScrollView>
</View>
);
}
}

export default App;

Button.js
import React, { Component } from "react";
import { TouchableHighlight, Text } from "react-native";

class Button extends Component {
constructor(props) {
super(props);
this.state = { pressStatus: false };
}

onHideUnderlay() {
this.setState({ pressStatus: false });
console.log("unpressed");
}
_onShowUnderlay() {
this.setState({ pressStatus: true });
console.log("pressed");
}

render() {
const { buttonStyle, textStyle } = styles;
return (
<TouchableHighlight
onPress={this.props.onPress}
underlayColor={"#fff000"}
activeOpacity={1}
style={[
buttonStyle,
this.props.buttonId === this.props.pressedButton
? { backgroundColor: "#fff000" }
: { backgroundColor: "#1D36FF" }
]}
// onHideUnderlay={this._onHideUnderlay.bind(this)}
onShowUnderlay={this._onShowUnderlay.bind(this)}
>
<Text style={textStyle}>{this.props.children}</Text>
</TouchableHighlight>
);
}
}

export default Button;

const styles = {
buttonStyle: {
marginTop: 10,
paddingTop: 15,
paddingBottom: 25,
marginLeft: 10,
// marginRight:10,
paddingLeft: 15,
paddingRight: 15,
backgroundColor: "rgba(99,99,99,0.99)",
borderRadius: 10,
borderWidth: 1,
borderColor: "#fff"
},
buttonPressedStyle: {
marginTop: 10,
paddingTop: 15,
paddingBottom: 25,
marginLeft: 10,
// marginRight:10,
paddingLeft: 15,
paddingRight: 15,
backgroundColor: "rgba(15,15,15,0.99)",
borderRadius: 10,
borderWidth: 1,
borderColor: "#fff"
},
textStyle: {
color: "#fff",
textAlign: "center",
fontSize: 16
}
};

这里的工作示例 - https://codesandbox.io/s/empty-currying-cikw4

关于javascript - 如何在按钮列表上聚焦/模糊事件 react 原生,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59890116/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com