2016-12-01 57 views
3

ポップアップコンポーネントを使用してセマンティックUIを反応させる際の入力エラーを表示できますか?私が思うに、このポップアップを使用してReact-Semantic-UIの入力エラーメッセージを表示

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

私はそれを達成するための方法があると思いますが、ではない:それはsemantic-ui-react documentation on Forms with Label (pointing). あなたは以下のコードに示すロジックを使用することができます参照達成するために。これを達成するには、ラベル付きフォーム(セマンティックUI)を参照してください。(http://react.semantic-ui.com/elements/label) – cdaiga

+0

別の解決策がある場合は、ここに提出してください。答えとして? – cdaiga

答えて

3

よう

何かがなく、ポップアップ・コンポーネントを使用することで、それを実現する方法があります。ポップアップ・コンポーネントを使用して

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> 
} 
関連する問題