में एक TextField रद्द करने के लिए मैं TextField घटक उपयोग कर रहा हूँ फोन नंबर पर कब्जा करने की। जैसे-जैसे उपयोगकर्ता टाइप कर रहा है, मैं प्रविष्टि को अमान्य करना चाहता हूं यदि यह कोई संख्या नहीं है या यदि यह प्रारूप का पालन नहीं करता है और त्रुटि टेक्स्ट प्रदर्शित करता है। वर्तमान में त्रुटि को फ़ील्ड को छूए बिना भी प्रदर्शित किया जाता है। मैं इस व्यवहार को कैसे प्राप्त कर सकता हूं?कैसे सामग्री यूआई
किसी भी मदद की बहुत सराहना की जाती है।
विस्तार Larry जवाब है, (उदाहरण के नीचे में errorText) राज्य में एक संपत्ति के लिए errorText निर्धारित किया है। जब टेक्स्टफ़ील्ड में मान बदलता है, तो प्रविष्टि को सत्यापित करें और त्रुटि को प्रदर्शित करने और छिपाने के लिए संपत्ति का मान (errorText) सेट करें।
class PhoneField extends Component
constructor(props) {
super(props)
this.state = { errorText: '', value: props.value }
}
onChange(event) {
if (event.target.value.match(phoneRegex)) {
this.setState({ errorText: '' })
} else {
this.setState({ errorText: 'Invalid format: ###-###-####' })
}
}
render() {
return (
<TextField hintText="Phone"
floatingLabelText="Phone"
name="phone"
errorText= {this.state.errorText}
onChange={this.onChange.bind(this)}
/>
)
}
}
अगर errorText एक खाली स्ट्रिंग "" है, तो यह प्रदर्शित नहीं किया जाएगा। तो, इसे getInitialState() में सेट करें।
यह library मान्य क्षेत्रों से संबंधित सब कुछ का ख्याल रखता है और, आप बस अपने क्षेत्र घटक रैप करने के लिए ... के प्रबंधन में प्रयास के एक बहुत बचत की जरूरत
अपने खेतों को मान्य करने के लिए यह सामग्री-ui का समर्थन करता है अपने आप को मैन्युअल रूप से बताएं।
<Validation group="myGroup1"
validators={[
{
validator: (val) => !validator.isEmpty(val),
errorMessage: "Cannot be left empty"
}, ...
}]}>
<TextField value={this.state.value}
className={styles.inputStyles}
style={{width: "100%"}}
onChange={
(evt)=>{
console.log("you have typed: ", evt.target.value);
}
}/>