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

Question

我是 React 的新手，制作了一个小型游戏组件，其中有 indoor和 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>

我以这种方式获得输出

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

任何人都可以帮助我吗？

这是有效的:“ https://codesandbox.io/s/tender-moon-frub1？”

Answer 1

问题: game state 从混合的室内和室外输入中获取状态，当您尝试在前一个状态的室外游戏中传播时 game字符串，它们被解释为字符数组，因为它们是可迭代的。它们以一个字符的形式传播。

预期:户外游戏单选按钮结果值字符串之一 或 一组室内游戏检查值 id 字符串。

解决方案:添加第二个状态来跟踪您正在与之交互的“标签”，即室内/室外。 (即使用事件处理程序被调用的事实)

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

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

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

然后使用检查“室内”复选框处理程序来查看是否已经与室内选项交互，或者 UI 是否刚刚从室外侧切换。

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 });
  }
};