Триггер React-Select onChange при изменении значения - PullRequest
Новая
       2

Триггер React-Select onChange при изменении значения

0 голосов
/ 05 мая 2020

Я использую React-Select, и на моей странице есть два раскрывающихся списка. Когда выбран первый раскрывающийся список, он успешно меняет значение второго раскрывающегося списка, но я пытаюсь изменить onChange во втором раскрывающемся списке, когда это тоже произойдет. Есть ли способ сделать это? Я сделал codeandbox простого примера того, что я пытаюсь выполнить sh

import React, {useState} from "react";
import Select from 'react-select';
import "./styles.css";

export default function App() {
  const [genre, setGenre] = useState()

  const artistslist = [
    {value: 'ACDC', label: 'AC/DC'},
    {value: 'LZ', label: 'Led Zeppelin'},
    {value: 'Garth', label: 'Garth Brooks'},
    {value: 'Alan', label: 'Alan Jackson'}
  ]

  const genrelist = [
    {value: 'rock', label: 'Rock'},
    {value: 'country', label: 'Country'}
  ]

  const handleArtistChange = (event) => {
    console.log(event)
    if (event.value === 'LZ' || event.value === "ACDC") {
      setGenre({value: 'rock', label: 'Rock'})
    } else {
      setGenre({value: 'country', label: 'Country'})
    }
    console.log(genre)
  }

  const handleGenreChange = (event) => {
    console.log("Genre Changed")
  }


  return (
    <div className="App">
      <Select options={artistslist} onChange={handleArtistChange} />
      <Select options={genrelist} value={genre} onChange={handleGenreChange} />
    </div>
  );
}

CodeSandbox Example

Ответы [ 2 ]

0 голосов
/ 05 мая 2020

Вы должны просто вызвать handleGenreChange со значением, которое response-select проходит от первого события. Вместо запуска другого события вы просто создаете цепочку событий из первого события.

0 голосов
/ 05 мая 2020

Это поведение не поддерживается React-Select . Однако вы можете вручную вызывать эту функцию всякий раз, когда что-либо изменяется: 

const handleArtistChange = (event) => {
  console.log(event)
  if (event.value === 'LZ' || event.value === "ACDC") {
    setGenre({ value: 'rock', label: 'Rock' })
  } else {
    setGenre({ value: 'country', label: 'Country' })
  }
  console.log(genre)
}

const handleGenreChange = (event) => {
  console.log("Genre Changed")
}

const handleChange = (selector, event) => {
  if (selector === "artist") {
    handleArtistChange(event);
  } else if (selector === "genre") {
    handleGenreChange(event);
  } else {
    // Other logic
  }
  // Here you trigger whatever you want
}

return (
  <div className="App">
    <Select options={artistslist} onChange={event => handleChange("artist", event)} />
    <Select options={genrelist} value={genre} onChange={event => handleChange("genre", event)} />
  </div>
)
...