3
ポップアップコンポーネントを使用してセマンティックUIを反応させる際の入力エラーを表示できますか?私が思うに、このポップアップを使用してReact-Semantic-UIの入力エラーメッセージを表示
<Popup
content="Error Message"
trigger={
<Input placeholder='Name' />
}
/>
ポップアップコンポーネントを使用してセマンティックUIを反応させる際の入力エラーを表示できますか?私が思うに、このポップアップを使用してReact-Semantic-UIの入力エラーメッセージを表示
<Popup
content="Error Message"
trigger={
<Input placeholder='Name' />
}
/>
よう
何かがなく、ポップアップ・コンポーネントを使用することで、それを実現する方法があります。ポップアップ・コンポーネントを使用して
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>
}
私はそれを達成するための方法があると思いますが、ではない:それはsemantic-ui-react documentation on Forms with Label (pointing). あなたは以下のコードに示すロジックを使用することができます参照達成するために。これを達成するには、ラベル付きフォーム(セマンティックUI)を参照してください。(http://react.semantic-ui.com/elements/label) – cdaiga
別の解決策がある場合は、ここに提出してください。答えとして? – cdaiga