使用Popup在React-Semantic-UI中顯示輸入錯誤消息

Question

可以使用Popup Component在反應語義UI中顯示輸入錯誤？

像這樣的事情

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