Javascript 我可以根据下拉菜单选择将按钮设置为执行不同的操作吗？

我在表格上有一个下拉菜单。一旦用户选择了一个选项，我希望Submit按钮根据下拉菜单项选择执行不同的请求。例如，如果用户选择苹果，则“提交”按钮将触发函数1，而如果用户选择香蕉，则“提交”按钮将触发函数2

我的父组件如下所示：

class Container extends React.PureComponent {
  _onSubmit = (date) => {
    this.props.function1({
      paramA: this.props.paramA,
      paramB: this.props.paramB,
    });
  };

  render() {
    return (
         <div>
            <DownloadForm
              dataSetName="Apples"
              buttonText="Request Report"
              onSubmit={this._onSubmit}
            />
        </div>
    );
  }
}

类容器扩展了React.PureComponent{
_onSubmit=（日期）=>{
这个。道具。功能1({
帕拉玛：这个，道具，帕拉玛，
paramB:this.props.paramB，
});
};
render（）{
返回(
);
}
}

现在，嵌套在这里的我的

DownloadForm

组件将有一个下拉菜单，并且基于下拉菜单的项，将让

onSubmit

使用函数2做一些事情，该函数也采用不同的参数

我不知道如何设计这个。我有一个如上所述的页面，父组件将

onSubmit

传递给它的嵌套组件，并激发到function1。我还有另一个页面，如上所述，父组件也将一个

onSubmit

传递给嵌套组件，该组件将激发function2

如何使嵌套组件内的下拉菜单项选择根据所选下拉菜单项将其按钮的

onSubmit

更改为“功能1”或“功能2”

---

我希望我的问题是清楚的

具有记录父组件内下拉选择值的状态。在submit（）中检查状态

if (this.state.selection == "Apples") { 
  function1(param1, param2)
}

下面是我编写的一段代码，应该可以帮助您开始。它还考虑了@Mikes的一些评论

class Container extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      selection: null
    }
  }

  onSubmit = (date) => {
    if (this.state.selection == "Apples") { 
      this.props.function1({
        paramA: this.props.paramA,
        paramB: this.props.paramB,
      });
    }
    if (this.state.selection == "Bananas") { 
      this.props.function2({
        paramA: this.props.paramA,
        paramB: this.props.paramB,
      });
    }
  };

  handleSelectionChange = (selection) => {
    this.setState({selection: selection})
  }

  render() {
    return (
         <div>
            <Dropdown
              onChange={this.handleSelectionChange}
            />
            <DownloadForm
              dataSetName="Apples"
              buttonText="Request Report"
              onSubmit={this._onSubmit}
            />
        </div>
    );
  }
}

类容器扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
选择：空
}
}
onSubmit=（日期）=>{
如果（this.state.selection==“Apples”）{
这个。道具。功能1({
帕拉玛：这个，道具，帕拉玛，
paramB:this.props.paramB，
});
}
如果（this.state.selection==“香蕉”）{
这个。道具。功能2({
帕拉玛：这个，道具，帕拉玛，
paramB:this.props.paramB，
});
}
};
handleSelectionChange=（选择）=>{
this.setState（{selection:selection}）
}
render（）{
返回(
);
}
}

相反，让用户的选择呈现一个不同的子组件，该子组件执行它需要执行的操作。还有，为什么

PureComponent

而不是

Component

？您需要

shouldComponentUpdate（）

函数吗？因为从表面上看，你没有。（为了进一步回答React问题，您的onSubmit将执行意外操作。在构造函数中使用

this.onSubmit=this.onSubmit.bind（this）；

，或者使用

onSubmit={（）=>this.onSubmit（）}

在您的JSX中。可能会删除前面的

。

，因为这不起任何作用，只会使代码变得不那么标准-JS-that-everyone-can-read.Hmm我不确定您所说的“让用户的选择呈现一个不同的子组件来完成它需要做的事情”是什么意思这个子组件应该包含什么？对于建议的更改，我现在就这样做。您说“我在表单上有一个下拉菜单。一旦用户选择了一个选项，我希望提交按钮执行不同的请求”但是，与其提出不同的请求，不如在你的

选择上设置一个
onChange
，让它更新你的应用程序状态，并让任何呈现你的提交按钮呈现一个不同的提交按钮，根据应用程序状态执行你需要的操作。谢谢@Mike'Pomax'Kamermans。这让它更清楚了。@Mike'Pomax'Kamerman如果你对我如何这样思考有任何见解，并想出你设计这个的方式，请告诉我。你写这篇文章的时候很清楚，但我觉得很傻，因为我绞尽脑汁这么长时间都没有想到这一点。谢谢Greg，我很快就可以让它工作了。只是无法让下拉菜单真正选择一个值！但是这个snippet让事情变得更清楚了。嗯，所以我仍然有问题。我的结构与你的类似，但在我的嵌套组件中，
，在我从菜单中选择我的选择后，
onSubmit
属性似乎没有改变。父组件中的状态正在改变，--
this.state.selection
更新为apple或Bananas.我想这是因为我的下拉列表在嵌套组件内部。因此我在下拉列表中有
onSelect
，它位于
内部，而不是它自己的组件。这是问题吗？不，我的
this.state.selection==“香蕉”中有一个拼写错误
检查。谢谢！如果你对我如何这样思考有任何意见，并提出你设计这个的方式，请让我知道。当你写它的时候，它是如此的清晰，但我感到很愚蠢，因为我绞尽脑汁这么长时间都没有想到这一点。@usershub123很抱歉这么晚才回复。我很高兴你让它工作起来了！通常写react代码来自经验。当你在问题中挣扎并变得更加熟悉react时，你会想到它。解决问题的方法通常有很多。Mike提出的方法与我的建议不同。彻底完成教程而不是复制粘贴通常是建立强大react基础的好方法谢谢Greg，我会继续努力我希望你能挺过来，表现得更好。谢谢你。