Как увеличить значение счетчика для каждого выпадающего списка - PullRequest
Новая
       8

Как увеличить значение счетчика для каждого выпадающего списка

0 голосов
/ 12 июня 2019

Я пытаюсь увеличить счетчик состояния реакции на основании выбора некоторых параметров из раскрывающегося меню.Проблема в том, что я хочу сохранить значение счетчика и непрерывно увеличивать его в зависимости от условия, например, выбрана опция "Test".

Я использую приведенный ниже код для увеличения счетчика, если "Test"выбрано в выпадающем списке 

{this.state.DownloadPrepare == "Test" ? this.state.Identify == "Test" : this.state.CalcNoOfObs+1}

Ответы [ 2 ]

0 голосов
/ 12 июня 2019

Я сделал скрипт для клика, который вы можете сделать и для изменения. Надеюсь, это полезно для вас.

Спасибо 

constructor(props) {
    super(props);
    this.state = {
      DownloadPrepare: "Test",
      Identify: "",
      CalcNoOfObs: 0
    };
  }

click() { // make your function what you want on change 
    this.state.DownloadPrepare == "Test"
      ? this.setState({
          Identify: "Test"
        })
      : this.setState({
          CalcNoOfObs: this.state.CalcNoOfObs + 1
        });
  }



<button onClick={() => this.click()}>click</button>
0 голосов
/ 12 июня 2019

Вы, вероятно, ищете что-то вроде этого: https://codesandbox.io/s/zealous-shirley-flznm

class App extends React.Component {
  state = {
    counter: 0,
    listOne: null,
    listTwo: null
  };

  incrementIfTest = event => {
    console.log(event.target.name);

    if (
      //check if is already selected, do not want to double count
      event.target.value === "Test" &&
      this.state[event.target.name] !== "Test"
    ) {
      //increment count
      this.setState({
        ...this.state,
        counter: this.state.counter + 1,
        [event.target.name]: event.target.value
      });
      //decrease count if they remove Test selection, cannot be below 0.
    } else if(this.state[event.target.name] === "Test"){
      this.setState({
        ...this.state,
        counter: this.state.counter > 0 ? this.state.counter - 1 : 0,
        [event.target.name]: event.target.value
      });
    }
  };

  render() {
    return (
      <div>
        <h4>{this.state.counter}</h4>
        <select name="listOne" onChange={this.incrementIfTest}>
          <option />
          <option>DownloadPrepare</option>
          <option>Test</option>
        </select>
        <select name="listTwo" onChange={this.incrementIfTest}>
          <option />
          <option>DownloadPrepare</option>
          <option>Test</option>
        </select>
      </div>
    );
  }
}

Воспользуйтесь прослушивателем событий onChange() в выпадающем меню (выберите тег). Мы можем передать событие и получить доступ к выбранной опции через event.target.value. Если оно равно Test, мы просто увеличиваем count

...