React Select不支持此行为。然而，只要有任何变化，您都可以手动调用该函数：
我使用React Select，页面上有两个下拉菜单。当第一个下拉列表被选中时，它成功地更改了第二个下拉列表的值，但我正试图在第二个菜单上的onChange也发生更改。有办法做到这一点吗？我做了一个代码沙盒，里面有一个我试图实现的简单例子
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示例
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>
)
您应该只使用第一个事件的response-select传递的值来调用handleGenreChange。您只需从第一个事件创建一个事件链，而不是触发另一个事件。