reactjs - 如何在下拉菜单中添加按钮？

Question

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

我想将按钮添加到此下拉列表

我不确定在哪里添加按钮的代码，或者是否有可能。这是下拉列表的当前代码：

          <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>``` 

标签： reactjsformsbuttonsemantic-ui

Answer 1

这是可能的：

有你的按钮到你的选项列表

options={[{ key: "ux", text: (<Button>your button</Button>), value: "ux" }]}