Confirm as Modal

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

Example

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

<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

/* 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

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