前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >React Semantic UI-CheatSheet

React Semantic UI-CheatSheet

作者头像
szhshp
发布2022-09-21 10:26:53
3380
发布2022-09-21 10:26:53
举报
文章被收录于专栏:szhshp 的第四边境中转站

Confirm as Modal

Tags: React, CSS, Modal, Semantic UI, actions, trigger

Example

代码语言:javascript
复制
<Button.Group>
  <Button>
    <Icon name="history" />
  </Button>
  <Button>
    <Icon name="edit" />
  </Button>
  <Modal
    trigger={(
      <Button
        icon
        title="Delete Employee"
      >
        <Icon name="trash" />
      </Button>
    )}
    header="Alert!"
    content="If you delete this employee then all related data"
    actions={[
      {
        key: 'yes',
        content: 'Yes',
        positive: true,
        onClick: () => {
          console.log(123);
        },
      },
      { key: 'no', content: 'No' },
    ]}
  />
</Button.Group>
  • If we used trigger then it will be rendered as HTML code specified. (Usually we may render it as a button)
  • We may render each action button per provided objects in attribute actions
    • In the above example, we may render 2 action buttons:
      1. Yes Button with on click event
      2. No Button without any binded event

Get Dropdown/Selector Value

Tags: React, Semantic UI, selector, value, selected option, dropdown

event.target.value is undefined from event:onChange of Dropdown in Semantic UI

Example

Simply reach the second argument to get the value:

代码语言:javascript
复制
<Select
  placeholder="Select An Employee"
  options={props.employees}
  value={props.employeeId}
  title="employeeId"
  onChange={(e, res) => {
    const { title, value } = props;
    // title = employeeId
    // value = option value
  }}
/>

onChange Template

代码语言:javascript
复制
/* only for dropdown */
handleDropdownChange (props, e) {
  const { name, value } = props
  // ...
}

/* only for inputs */
handleInputChange (props, e) {
  const { name, value } = props
  // ...
}

Capture Form Inputs

For form inputs we can also capture the input via second argument

代码语言:javascript
复制
handleChange = (e, { name, value }) => this.setState({ [name]: value })

render() {
  const { name, email, submittedName, submittedEmail } = this.state

  return (
    <div>
      <Form onSubmit={this.handleSubmit}>
        <Form.Group>
          <Form.Input
            placeholder='Name'
            name='name'
            value={name}
            onChange={this.handleChange}
          />
          <Form.Input
            placeholder='Email'
            name='email'
            value={email}
            onChange={this.handleChange}
          />
          <Form.Button content='Submit' />
        </Form.Group>
      </Form>
      <strong>onChange:</strong>
      <pre>{JSON.stringify({ name, email }, null, 2)}</pre>
      <strong>onSubmit:</strong>
      <pre>{JSON.stringify({ submittedName, submittedEmail }, null, 2)}</pre>
    </div>
  )
}

See full instruction: https://react.semantic-ui.com/collections/form/#usage-capture-values

Reference

https://react.semantic-ui.com/modules/modal/#types-shorthand

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-01-27,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Confirm as Modal
    • Example
    • Get Dropdown/Selector Value
      • Example
        • onChange Template
          • Capture Form Inputs
          • Reference
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档