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

Question

我是新的反应，并作出了一个小游戏组件，其中有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状态从室内和室外输入混合获得状态，当您尝试在前一个州的户外游戏game字符串中扩展时，它们会被解释为字符数组，因为它们是可迭代的。它们会在一个时间里传播开来。

期望值：(户外游戏单选按钮之一)，结果值字符串，或，一个室内游戏数组，检查值id字符串。

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

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

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

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

​

​

Answer 2

在handleCheck中，您的第一个参数不包含您要查找的信息，它们将出现在回调函数的第二个参数中。所以，您需要使用第二个参数。另外，您正在从state而不是this.props中破坏this.props。

带有工作解决方案的更新沙箱：https://codesandbox.io/s/keen-gates-b4jsn