React Reduction-Select Onchange get method request

Question

我有以下情况，我提供一个codesandbox demo来证明我现有的问题。

有关案件以及如何复制案件的一些解释

我在组件League.js中，列表中的任何联赛都有链接

<a href={`#${item.league_id}`} onClick={(e) => onClick(e, item.league_id)}>

  const onClick = (evt, id) => {
    evt.preventDefault();
    getDetail(id)
  };

onclick函数在Details.js组件中填充团队名称。您可以在下面看到。

select options

[这是我现在在

  if (teamsDetail.length) {
    details = (
      <select value={selectedOption} onChange={selectTeamStat}>
        {teamsDetail && teamsDetail.length > 0
          ? teamsDetail.map(item => (
              <option key={`${item.team_id}`} value={item.team_id}>
                {item.name}
              </option>
            ))
          : null}
      </select>
    );
  }

组件中遇到的问题，当我在选择中选择球队名称时，我想发送一个获取请求Detail.js，其中我必须设置两个参数（getStats]

这里是相关代码

team_id and league_id

目前我只能传递作为选择值

const [selectedOption, setSelectedOption] = useState("");

  const selectTeamStat = evt => {
    const { value } = evt.target;
    setSelectedOption(value);
    getStats(357, value);
  };

的team_id

我还如何传递selectedOption参数？

我现在已经将league_id进行了硬编码，但是我需要使用参数357。如何从league_id组件传递它？

Answer 1

在我的头上，您可能想尝试以下两种解决方案：

• 将您选择的每个选项设置为元组：

  value = {[item.league_id，item.team_id]}

• [将每个选择的选项设置为League.js和team_id作为数据属性