Как добавить кнопку в выпадающем меню? - PullRequest
Новая
       27

Как добавить кнопку в выпадающем меню?

0 голосов
/ 22 апреля 2020

Я присоединился к текущему проекту реагирования для участия в тематических исследованиях. Мы используем semanti c -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>```

1 Ответ

0 голосов
/ 22 апреля 2020

это возможно:

была ваша кнопка в вашем списке опций

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

...