Использовать всплывающее окно для отображения сообщения об ошибке ввода в React-Semantic-UI

Question

Можно использовать компонент всплывающих окон для отображения входных ошибок в ответном семантическом интерфейсе?

Что-то вроде этого

<Popup 
    content="Error Message" 
    trigger={ 
    <Input placeholder='Name' /> 
    } 
/> 

Answer 1

Я думаю, что есть способ для достижения этой цели, но не с помощью компонента всплывающего. Для достижения этой цели см semantic-ui-react documentation on Forms with Label (pointing). Вы можете использовать логику, показанную в коде ниже:

import React, { Component } from 'react' 
import { Form, Label, Input, Button } from 'semantic-ui-react' 

export default class MyCustomForm extends Component { 
    constructor(props){ 
    super(props) 
    } 
    this.state = { 
    input1: 'some value', 
    input2: '', 
    errors: { 
     input1: 'Input 1 error message' 
    } 
    this.onChange = this.onChange.bind(this) 
    this.validate = this.validate.bind(this) 
    this.onSubmit = this.onSubmit.bind(this) 
    } 
    onChange(e, {name, value}){ 
    const state = this.state 
    const { errors } = state 
    if(errors[name]){ 
     delete errors[name] 
    } 
    this.setState(Object.assign({},...state,{[name]: value, errors })) 
    this.validate(name, value) 
    } 
    validate(name, value){ 
    {/* 
     THIS SHOULD VALIDATE THE INPUT WITH THE APPROPRIATE NAME ATTRIBUTE 
     AND UPDATE THE ERRORS ATTRIBUTE OF THE STATE 
    */} 
    } 
    onSubmit(e){ 
    e.preventDefault() 
    {/* CLEAR THE ERRORS OF THE STATE, SUBMIT FORM TO BACKEND, THENj RESET ERRORS IF ANY */} 
    } 
    render() { 
    <Form size='small' key='mycustomform'> 

     <Form.Group> 
     <Form.Field error={errors.input1} required> 
      <label>Input1</label> 
      <Input name='input1' onChange={this.onChange}/> 
     {errors.input1 && <Label pointing color='red'>{errors.input1}</Label>} 
     </Form.Field> 
     </Form.Group> 

     <Form.Group> 
     <Form.Field error={errors.input2}> 
      <label>Input2</label> 
      <Input name='input2' onChange={this.onChange}/> 
     {errors.input2 && <Label pointing color='red'>{errors.input2}</Label>} 
     </Form.Field> 
    </Form.Group> 

    <Form.Field control={Button} onSubmit={this.onSubmit}/> 
    </Form> 
}