Question

我想知道如何在一次单击时将一个按钮切换为绿色。在我当前的代码中，当我单击其中一个（意图将其中一个切换为绿色）时，它也会将其他三个按钮也切换为绿色。

注意：white-btn和green-btn是我定义的CSS类。

我已经做了太多尝试在此处列出来尝试纠正此问题。我究竟做错了什么？

constructor(props) {
    super(props);
    this.state = {
        white: true,
        smallSize: false,
        mediumSize: false,
        largeSize: false,
        xLargeSize: false,
    };
    this.smallClicked = this.smallClicked.bind(this);
    this.mediumClicked = this.mediumClicked.bind(this);
    this.largeClicked = this.largeClicked.bind(this);
    this.xLargeClicked = this.xLargeClicked.bind(this);
}

smallClicked() {
    console.log("clicked small");
    this.setState({smallSize: true, mediumSize: null, largeSize: null, xLargeSize: null, white: !this.state.white});
}

mediumClicked() {
    console.log("clicked medium");
    this.setState({mediumSize: true, smallSize: null, largeSize: null, xLargeSize: null, white: !this.state.white});
}

largeClicked() {
    console.log("clicked large");
    this.setState({largeSize: true, smallSize: null, mediumSize: null, xLargeSize: null, white: !this.state.white});
}

xLargeClicked() {
    console.log("clicked x-large");
    this.setState({xLargeSize: true, smallSize: null, mediumSize: null, largeSize: null, white: !this.state.white});
}

render() {
    let color_switch_size = this.state.white ? "white-btn" : "green-btn";

   return(
     <button className={color_switch_size} onClick={this.smallClicked}>Small</button>
     <button className={color_switch_size} onClick={this.mediumClicked}>Medium</button>
    <button className={color_switch_size} onClick={this.largeClicked}>Large</button>
   <button className={color_switch_size} onClick={this.xLargeClicked}>X-Large</button>
   );
}

Answer 1

一种方法是拥有一个用于处理点击状态的类，例如“ greenClas”。

对于每个按钮，您都可以添加该类，以防万一它未被单击。

 return(
     <button className={`buttonClass ${this.state.smallSize} ? 'greenClass' : ''`} onClick={this.smallClicked}>Small</button>

... 

   );

Answer 2

我将更改一些有关其结构的内容。我将只使用一个更改处理程序，而不再使用white变量。

这是我的建议：

const initialValues = {
  small: false,
  medium: false,
  large: false,
  x_large: false,
};

.....

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

// We'll use a generic handler that receives the button name
handleClick = (button) => (e) => {
  // Update the button to be the opposite of what it was before
  this.setState({[button]: !this.state[button]});

  // OR

  // If you want to restrict it to one white button at a time
  this.setState({
    ...initialValues,
    [button]: !this.state[button]
  });
}

// Separate this into its own function to keep render cleaner
getClassName = (button) => {
  // if button is set to true, use white
  if (this.state[button]) {
    return "white-btn";
  }
  // else use green
  return "green-btn";
}

render() {
  // Now each button has its class name managed independently
  return(
    <>
      <button 
        className={this.getClassName('small')}
        onClick={this.handleClick('small')}
      >
        Small
      </button>
      <button 
        className={this.getClassName('medium')} 
        onClick={this.handleClick('medium')}
      >
        Medium
      </button>
      <button
        className={this.getClassName('large')} 
        onClick={this.handleClick('large')}
      >
        Large
      </button>
      <button 
        className={this.getClassName('x_large')} 
        onClick={this.handleClick('x_large')}
      >
        X-Large
      </button>
    </>
   );
}

Answer 3

这是我的主意。我只是添加了一个小条件，以在应用样式之前验证按钮

constructor(props) {
    super(props);
    this.state = {
      white: true,
      smallSize: false,
      mediumSize: false,
      largeSize: false,
      xLargeSize: false
    };
    this.smallClicked = this.smallClicked.bind(this);
    this.mediumClicked = this.mediumClicked.bind(this);
    this.largeClicked = this.largeClicked.bind(this);
    this.xLargeClicked = this.xLargeClicked.bind(this);
  }

  smallClicked() {
    console.log("clicked small");
    this.setState({
      smallSize: true,
      mediumSize: null,
      largeSize: null,
      xLargeSize: null,
      white: !this.state.white
    });
  }

  mediumClicked() {
    console.log("clicked medium");
    this.setState({
      mediumSize: true,
      smallSize: null,
      largeSize: null,
      xLargeSize: null,
      white: !this.state.white
    });
  }

  largeClicked() {
    console.log("clicked large");
    this.setState({
      largeSize: true,
      smallSize: null,
      mediumSize: null,
      xLargeSize: null,
      white: !this.state.white
    });
  }

  xLargeClicked() {
    console.log("clicked x-large");
    this.setState({
      xLargeSize: true,
      smallSize: null,
      mediumSize: null,
      largeSize: null,
      white: !this.state.white
    });
  }

  render() {
    let color_switch_size = this.state.white ? "white-btn" : "green-btn";

    return (
      <React.Fragment>
        <button
          className={this.state.smallSize && color_switch_size}
          onClick={this.smallClicked}
        >
          Small
        </button>
        <button
          className={this.state.mediumSize && color_switch_size}
          onClick={this.mediumClicked}
        >
          Medium
        </button>
        <button
          className={this.state.largeSize && color_switch_size}
          onClick={this.largeClicked}
        >
          Large
        </button>
        <button
          className={this.state.xLargeSize && color_switch_size}
          onClick={this.xLargeClicked}
        >
          X-Large
        </button>
      </React.Fragment>
    );
  }

Answer 4

this.state = {
    small: true,
    medium: true,
    large: true,
    xLarge: true,
}

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

getButtons = () => {
    const sizes = ['small', 'medium', 'large', 'xlarge'];
    return sizes.map(size => <button className={this.state[size] ? 'white-btn' : 'green-btn'} onClick={this.changeColor} name={size}>{size.toCamelCase()}</button>)
}

render() {
    return (
        <div>
            {this.getButtons()}
        </div>
    )
}

Answer 5

我认为您可以通过一种更简单的方法来实现这一目标。该解决方案对您有用吗？

    constructor(props) {
    super(props);
    this.state = {
      smallSize: false,
      mediumSize: false,
      largeSize: false,
      xLargeSize: false
    };
  }

  onButtonPress = buttonName => {
    console.log('clicked  ' + buttonName);
    let myButtonsState = this.state;
    myButtonsState[buttonName] = !myButtonsState[buttonName];
    this.setState({
      ...myButtonsState
    });
  };

  render() {

    return (
      <View>
        <button
          className={this.state.smallSize ? 'white-btn' : 'green-btn'}
          onClick={() => this.onButtonPress('smallSize')}
        >
          Small
        </button>
        <button
        className={this.state.mediumSize ? 'white-btn' : 'green-btn'}
          onClick={() => this.onButtonPress('mediumSize')}
        >
          Medium
        </button>
        <button
        className={this.state.largeSize ? 'white-btn' : 'green-btn'}
          onClick={() => this.onButtonPress('largeSize')}
        >
          Large
        </button>
        <button
        className={this.state.xLargeSize ? 'white-btn' : 'green-btn'}
          onClick={() => this.onButtonPress('xLargeSize')}
        >
          X-Large
        </button>
      </View>
    );
  }

如何单击一次只能切换一个按钮？

5 个答案: