Как изменить текстовое значение для многих кнопок одной кнопкой, но разными значениями?

Question

Я пробовал много способов сделать это, но это дает мне один и тот же результат каждый раз, когда я хочу сделать кнопку (случайную), которая изменяет текст других кнопок (Выбрать отпуск) со случайным различным значением для каждой из них, но не то же самое значение, вот мини-пример, если кто-то может помочь

class ShiftChange extends Component {
    constructor(props) {
        super(props);
        this.state = {
            Off: " Choose Vacation",
            rand: "random",
        }
    }
    Change = () => (
        this.setState({
            Off: "Off"
        })
    )
    shuffle = () => {
        if (this.state.Off !== "Off") {
            var x = ["2:00 to 11:00 ", "3:00 to 12:00", "12:00 to 9:00"]
            this.setState({
                Off: x[Math.floor(Math.random() * x.length)]
            })
        }
    }
    render() {
        return (
            <div>
                <button onClick={this.Change}>
                    {this.state.Off}
                </button>
                <button onClick={this.Change}>
                    {this.state.Off}
                </button>
                <button onClick={this.shuffle}>
                    random
                </button>
            </div>
        );
    }
}

Снимок кнопки

Answer 1

Вот некоторые проблемы в вашем коде.

1. Вы устанавливаете состояние Выключено in Перемешиваете Функция, которая настраивается только один раз Выключена значение состояния не два раза (<- обратите внимание здесь) </li>

Что вы можете сделать, создать две переменные состояния и установить в соответствии с ними.

Вот как это можно сделать:

import React, { Component } from "react";
import "./styles.css";

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      Off1: " Choose Vacation",
      Off2: "Choose Vacation",
      rand: "random"
    };
  }
  Change = () =>
    this.setState({
      Off1: "Off1",
      Off2: "Off2"
    });
  shuffle = () => {
    if (this.state.Off !== "Off") {
      var x = ["2:00 to 11:00 ", "3:00 to 12:00", "12:00 to 9:00"];
      this.setState({
        Off1: x[Math.floor(Math.random() * x.length)],
        Off2: x[Math.floor(Math.random() * x.length)]
      });
    }
  };
  render() {
    return (
      <div>
        <button onClick={this.Change}>{this.state.Off1}</button>
        <button onClick={this.Change}>{this.state.Off2}</button>
        <button onClick={this.shuffle}>random</button>
      </div>
    );
  }
}

Вот рабочая демонстрационная ссылка: https://codesandbox.io/s/broken-butterfly-rybjk

Answer 2

При изменении функции попробуйте установить значение состояния на что-то другое, потому что вы пытаетесь установить значение на «выключено», чтобы условие if никогда не становилось истинным, поэтому значения никогда не менялись

Хорошего дня! !