javascript - How to change color of button on press in React Native? - Stack Overflow

admin管理员组

文章数量:1423163

I have added Text inside touchableopacity now when user clicks on touchableopacity I want to change color of that button from default gray color to blue color see screenshot below. Now initially checked={this.state.newProjects} newProjects is not present inside state variable so onclick it should create new variable so that checked prop bees true and then color changes. So I need to toggle button color onpress each time. Below code is not working. I am trying to create samething -> but in react native.

Code:

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
    },

Screenshot:

I have added Text inside touchableopacity now when user clicks on touchableopacity I want to change color of that button from default gray color to blue color see screenshot below. Now initially checked={this.state.newProjects} newProjects is not present inside state variable so onclick it should create new variable so that checked prop bees true and then color changes. So I need to toggle button color onpress each time. Below code is not working. I am trying to create samething -> https://codesandbox.io/s/k3lzwo27z5 but in react native.

Code:

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
    },

Screenshot:

• javascript
• css
• reactjs
• react-native

Share Improve this question Follow asked Feb 13, 2019 at 7:48 fun jokerfun joker 1,72777 gold badges3434 silver badges5454 bronze badges 1

• Refer to my answer here: stackoverflow./a/64764528/9496077 – Ankush Chauhan Commented Nov 10, 2020 at 7:30

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

The color of button should be defined on <Text> instead of

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

You have to declare newProjects inside state.

Code:

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

AND change your nulll check to this.

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

This is where you have a problem:

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

onPress takes a function, not returned value of an executed function. by doing this: this.handleClick('newProjects') you have an execution here. onPress executes the function name given. This is not how you call your own function. I know it's confusing but please try to bear with me here:

onPress={this.handleClick}

This will invoke your function on a click/tap but it's actually the default function it suppose to execute. At this point your handleCLick would look like:

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

But in any case if you want to send some value from the ponent level better way to do would be:

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

本文标签： javascriptHow to change color of button on press in React NativeStack Overflow