如何通过选择并切换到reactjs中的任何选项来仅获取父组件变量中的一个值？

我是 React 新手，制作了一个小型游戏组件，其中有indoor and outdoor选项。在室外项目中，我们有 2 个单选按钮，在室内项目中，我们有多个复选框。我的目标是我们必须为室外或室内游戏场只获取一个值（室内游戏可能有多个值）。但不知道如何从这些领域获取价值。

室内和室外：

   <Form>
            <Form.Field
              as="h4"
              control={Radio}
              label="Foot-Ball"
              key="Foot-Ball"
              value="Foot-Ball"
              checked={this.props.game === "Foot-Ball"}
              onChange={this.props.onChange}
            />
            <Form.Field
              as="h4"
              control={Radio}
              label="Cricket"
              key="Cricket"
              value="Cricket"
              checked={this.props.game === "Cricket"}
              onChange={this.props.onChange}
            />{" "}
          </Form>

I'm getting output in this way

我的目标是变量game，要么我应该获取单选按钮值，要么我必须获取室内游戏值，但不能同时获取游戏变量中的值。

有人能帮我吗？

这是工作的：“https://codesandbox.io/s/tender-moon-frub1?"

Issue: The gamestate 从混合的室内和室外输入获取状态，并且当您尝试在前一个状态的户外游戏中传播时game字符串，它们被解释为字符数组，因为它们是可迭代的。它们一次一个地传播。

预期的：Outdoor Games 单选按钮结果值字符串之一OR室内游戏检查值 ID 字符串数组。

解决方案：添加第二个状态来跟踪您正在与哪个“选项卡”交互，即室内/室外。 （IE。使用事件处理程序被调用的事实)

this.state = {
  indoor: null,
  game: ""
};

添加切换indoor与“室外”单选按钮交互时为 false。

handleRadioSelect = (e, { value }) => {
  this.setState({ indoor: false, game: value });
};

然后使用“室内”复选框处理程序中的检查来查看是否already与室内选项互动or如果用户界面刚刚切换自室外侧。

handleCheck = id => {
  const { game, indoor } = this.state;

  if (!indoor) {
    // switching from outdoor games
    // set indoor and initialize array
    this.setState({ indoor: true, game: [id] });
  } else {
    // filter array as per usual
    const result = game.includes(id)
      ? game.filter(x => x !== id)
      : [...game, id];

    this.setState({ game: result });
  }
};