Question

可以使用弹出组件在反应语义UI中显示输入错误吗？

像这样的东西

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

Answer 1

我认为有一种方法可以实现这一点，但不是通过使用PopUp组件。要实现这一点，请参阅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>
}

使用Popup在React-Semantic-UI中显示输入错误消息

1 个答案: