Question

我现在在用户单击touchableopacity时在touchableopacity中添加了文本，我想将该按钮的颜色从默认的灰色更改为蓝色，请参见下面的屏幕截图。现在最初checked={this.state.newProjects} newProjects不在状态变量中，因此onclick它应该创建新变量，以便checked prop变为true，然后颜色发生变化。所以我需要每次切换按钮颜色onpress。下面的代码不起作用。我正在尝试创建相同的东西-> https://codesandbox.io/s/k3lzwo27z5，但本机做出了反应。

代码：

constructor(props) {
        super(props);
        this.state = {

        };
    }

    handleClick = e => {
    this.setState({
        [e.target.name]: !this.state[e.target.name]
    });
};

<TouchableOpacity onPress={this.handleClick('newProjects')}>
                        <Filterbutton name="New Projects" checked={this.state.newProjects}/>
                    </TouchableOpacity>

Filterbuttonjs：

const Filterbutton = ({name, checked}) => (
    <View style={checked ? styles.buttonTab : styles.defaultButtonTab}>
        <Text style={styles.buttonContent}>{name}</Text>
    </View>
)

export default Filterbutton;

const styles = StyleSheet.create({
    defaultButtonTab: {
        justifyContent: 'center',
        alignItems: 'center',
        maxWidth: 150,
        height: 30,
        padding: 10,
        borderRadius: 13,
        borderStyle: "solid",
        borderWidth: 1.3,
        borderColor: "rgba(131, 143, 158, 0.7)",
        marginRight: 10,
        marginTop: 10
    },
    buttonTab: {
        justifyContent: 'center',
        alignItems: 'center',
        maxWidth: 150,
        height: 30,
        padding: 10,
        borderRadius: 13,
        borderStyle: "solid",
        borderWidth: 1.3,
        borderColor: "#1994fc",
        marginRight: 10,
        marginTop: 10
    },

屏幕截图：

Answer 1

按钮的颜色应在<Text>而不是

上定义

<View>
  <Text style={[styles.text, checked ? styles.btnChecked : '']}>{name}</Text>
</View>

Answer 2

您必须在状态内部声明newProjects。

Code:

constructor(props) {
        super(props);
        this.state = {
             newProjects=''
        };
    }

AND 将此更改为空。

 <View style={!checked ? styles.defaultButtonTab :styles.buttonTab }>

Answer 3

这是您遇到的问题：

onPress={this.handleClick('newProjects')}

onPress接受一个函数，而不是执行函数的返回值。通过执行以下操作：this.handleClick('newProjects')，您将在此处执行死刑。 onPress执行给定的函数名称。这不是您调用自己的函数的方式。我知道这很令人困惑，但是请尝试在这里与我一起忍受：

onPress={this.handleClick}

这将在单击/点击时调用您的函数，但这实际上是它假定要执行的默认函数。此时，您的handleCLick如下所示：

handleClick = (e) => {
  //do stuff
}

但是无论如何，如果您想从组件级别发送一些值，更好的方法是：

onPress={(v) => this.handleClick(yourValue)}

如何在React Native中更改按钮的颜色？

3 个答案: