如何为React中仅使用单个事件处理程序的多个选择选项重用一个函数

Question

我正在构建一个小型玩家模拟器。您选择一个团队，该团队的球员即可使用。您选择一名球员，该球员的统计数据将可用。

我试图为每个select元素重用一个onChange处理程序。

在我的初始代码中，我必须为团队中的每个球员使用一个单独的球员统计功能。(以下示例中的homePlayer1Stats和homePlayer2Stats(这将为我提供11个主客场球队的统计功能。你能告诉我如何将homePlayer1 homePlayer2等变成homePlayer(i(，这样我就可以使用一个统计功能了吗？

我已经包含了应用程序，团队和玩家在这里选择组件以确保完整性。

const intialValues = {
home: 'Choose team',
away: 'Choose team',
homePlayer1: 'Choose Opener',
homePlayer2: 'Choose Opener',
awayPlayer1: 'Choose Opener'
};
function App() {
const [values, setValues] = useState(intialValues);

const handleInputChange = (e) => {
const { name, value } = e.target;
setValues({
...values,
[name]: value,
});
};

function homePlayerArray() {
const filteredArray = statsFile.filter(element => {
return element.Country === values.home
})
const sortedArray = filteredArray.sort((a,b) => (a.Player > b.Player) ? 1 : ((b.Player > a.Player) ? -1 : 0));
return sortedArray;
}
function homePlayer1Stats() {
const filter = homePlayerArray().filter(element => {
return element.Player === values.homePlayer1
})
return filter
}
function homePlayer2Stats() {
const filter = homePlayerArray().filter(element => {
return element.Player === values.homePlayer2
})
return filter
}
return (
<>
<h1>Simulator</h1>
<ErrorBoundary>
<Rules />
</ErrorBoundary>
<ErrorBoundary>
<Teams
handleInputChange={handleInputChange}
home={values.home}
away={values.away}
/>
</ErrorBoundary>
<ErrorBoundary>
<Players 
handleInputChange={handleInputChange}
homePlayer1={values.homePlayer1}
homePlayer2={values.homePlayer2}
awayPlayer1={values.awayPlayer1}
homePlayerArray={homePlayerArray()}
awayPlayerArray={awayPlayerArray()}
homePlayer1Stats={homePlayer1Stats()}
homePlayer2Stats={homePlayer2Stats()}
/>
</ErrorBoundary>

部分团队选择组件

<h3>Home Team</h3>
<select 
onChange={props.handleInputChange}
value={props.home}
name='home'
>
<option value={props.home}>
{props.home}
</option>

{countryArray().map((element) => 
<option key={element} value={element}>
{element}
</option>)}
</select>

玩家选择组件的一部分

<td>
<select 
onChange={props.handleInputChange}
value={props.homePlayer1}
name='homePlayer1'
>
<option value={props.homePlayer1>        
{props.homePlayer1}
</option>

{props.homePlayerArray.map((element) => 
<option 
key={element.Player} 
value={element.Player}
>
{element.Player}
</option>)}
</select>
</td>
{props.homePlayer1Stats.map((element) => 
<td 
key={element.BatAverage} 
value={element.BatAverage}
>
{element.BatAverage}
</td>)}

Answer 1

将要用作过滤器的团队作为函数的参数：

function homePlayer2Stats(homePlayer) {
const filter = homePlayerArray().filter(element => {
return element.Player === homePlayer;
})
return filter;
}

现在您可以重用该函数了。