如何在下拉菜单中添加按钮? [英] How to add a button within a dropdown menu?

问题描述

我加入了一个正在进行的反应项目，以进入案例研究.我们将语义UI用于表单和表单下拉列表.我想做的是在下拉菜单中添加一个按钮，该按钮将启动另一个菜单.

I joined an ongoing react project for entering case studies. We are using semantic-ui for forms and form dropdowns. What I want to do is add a button within the drop-down that will initiate another menu.

我要在该下拉菜单中添加按钮

我不确定在何处添加按钮代码，甚至不确定.这是下拉菜单的当前代码:

I'm unsure of where to add the code for the button or if it's even possible. Here is the current code for the dropdowns:

          <h1 className="ui centered">Select Engagement Details</h1>
          <Form.Group widths="equal">
            <Form.Dropdown
              fluid
              selection
              placeholder="Client Name"
              onChange={(e, { value }) => {
                this.props.handleDropdown({
                  input: "clientName",
                  value: value,
                  optionType: "clientOptions",
                  options: this.state.clients
                });
              }}
              defaultValue={values.clientName}
              options={this.state.clients}
            />

            <Form.Dropdown
              fluid
              selection
              placeholder="Engagement Name"
              onChange={(e, { value }) => {
                this.props.handleDropdown({
                  value: value,
                  input: "engagementName",
                  optionType: "engagementNameOptions",
                  options: this.state.engagements
                });
              }}
              defaultValue={values.engagementName}
              options={this.state.engagements}
            />
          </Form.Group>
          <Button disabled={!isEnabled} onClick={this.saveAndContinue}>
            {" "}
            Continue
          </Button>

          {/* starts new engagement area */}
          <hr style={{marginTop: '30px'}}/>
          <h2 className="ui centered"> New Engagement </h2>

          <Form.Group controlId="newEngagementGroup" widths="equal">
            {/* type is not required. Type is useful for common types like "email" or "password" */}
            <Form.Input 
                  type="clientName" 
                  placeholder="Enter Client Name"
                  ref="newClient"
                  onChange={(e, { value }) => {
                    this.props.handleDropdown({
                      input: "newEngagementClientName",
                      value: value
                    })
                  }}
                  defaultValue={values.newClientName}
            />
            <Form.Input 
                  type="engagementType" 
                  placeholder="Enter Engagement Type"
                  ref="newEngagementType"
                  onChange={(e, { value }) => {
                    this.props.handleDropdown({
                      input: "newEngagementType",
                      value: value
                    })
                  }}
                  defaultValue={values.newEngagementType} />
          </Form.Group>``` 

推荐答案

可能:

在您的选项列表中有按钮

had your button to your options list

options = {[{键:"ux"，文本:(< Button>您的按钮</Button>)，值:"ux"}]}}

这篇关于如何在下拉菜单中添加按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！