按钮单击时更改颜色答案

【问题标题】：Button Changes color when it is clicked按钮单击时更改颜色
【发布时间】：2021-07-07 03:23:51
【问题描述】：

我目前正在使用 react-native。我的目标是让按钮的颜色在被点击时成为随机颜色。

import React, { Component } from 'react';
import { Text, View, StyleSheet, Button } from 'react-native';

export default class App extends Component {
  constructor() {
    super();
    this.state = {
      counter: 0,
      buttonColor: 'blue',
    };
  }
  componentDidMount() {
    setInterval(this.incrimentCounter, 100000000000);
  }
  //incrimentCounter = () => {
 //this.setState({ counter: this.state.counter + 1 });
 // };
  componentDidUpdate() {
    console.log('Counter value has changed');
  }
  changeColor = () => {
    var letters = '0123456789ABCDE'
    var color = "#"
    
  };
  render() {
    return (
      <View style={{ flex: 1 }}>
        <Text style={{ marginTop: 50, marginLeft: 170 }}>
          {this.state.counter}
        </Text>
        <Button
          title="Click"
          color={this.state.buttonColor}
          onPress={this.changeColour}></Button>
      </View>
    );
  }
}

这是供参考的小吃。 https://snack.expo.io/@therealsneh/df3efe 我在第 21 行有一个名为“changeColor”的箭头函数。我已经定义了 2 个变量、字母和 hexaDecimalHash。使用这两个变量，我将能够创建一个随机的十六进制，例如#4934eb。使用这个随机的十六进制颜色，按钮看起来像这样。谢谢！

【问题讨论】：

添加您的研究工作或您为解决问题所做的工作。

标签： javascript reactjs react-native button expo

【解决方案1】：

试试这样。我认为它对你有用。

import React, { Component } from 'react';
import { Text, View, StyleSheet, Button } from 'react-native';

export default class App extends Component {
  constructor() {
    super();
    this.state = {
      counter: 0,
      buttonColor: 'blue',
    };
  }
  componentDidMount() {
    setInterval(this.incrimentCounter, 100000000000);
  }
  incrimentCounter = () => {
 this.setState({ counter: this.state.counter + 1 });
  };
  componentDidUpdate() {
    console.log('Counter value has changed');
  }
  changeColor = () => {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++) {
      color += letters[Math.floor(Math.random() * 16)];
    }
    if(color==="#FFFFFF") return;
    this.setState({
      buttonColor:color
   })
    
  };
  render() {
    return (
      <View style={{ flex: 1 }}>
        <Text style={{ marginTop: 50, marginLeft: 170 }}>
          {this.state.counter}
        </Text>
        <Button
          title="Click"
          style={{color:this.state.buttonColor}}
          onPress={this.changeColor}></Button>
      </View>
    );
  }
}

它在这里工作 https://snack.expo.io/AfmXSZ9R1

【讨论】：

感谢您抽出宝贵时间回答我的问题！但是，我希望按钮的颜色在单击时改变。您与我共享的代码仅显示一种颜色，即使我单击它也是如此。

【解决方案2】：

生成随机数并将push 放入color，然后附加Hash + color

Demo

changeColor = () => {
  var letters = '0123456789ABCDE'.split("");
  var hexaDecimalHash = "#";
  const color = [];
  while (color.length !== 6) {
    color.push(letters[Math.floor(Math.random() * letters.length + 1)])
  }
  this.setState({
    buttonColor: `${hexaDecimalHash}${color.join("")}`
  })
};

【讨论】：