Javascript 如何使 Material UI 中的 TextField 无效
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35901440/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to invalidate a TextField in Material UI
提问by Mo3z
I am using TextField component to capture phone number. As the user is typing, I want to invalidate the entry if it is not a number or if it does not follow a format and display the errorText. Currently errorText is displayed even without touching the field. How can I achieve this behavior?
我正在使用 TextField 组件来捕获电话号码。当用户输入时，如果它不是数字或者它不遵循格式并显示错误文本，我想使该条目无效。当前即使不触摸该字段也会显示 errorText 。我怎样才能实现这种行为？
Any help is greatly appreciated.
任何帮助是极大的赞赏。
回答by Mo3z
Extending Larryanswer, set errorText to a property in state (errorText in below example). When the value in TextField changes, validate the entry and set the value of the property (errorText) to display and hide the error.
扩展Larry答案，将 errorText 设置为 state 中的属性（下面示例中的 errorText）。当 TextField 中的值发生变化时，验证条目并设置属性 (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)}
/>
)
}
}
回答by Sam
As of 0.20.1 you can helperTextand errorprops
从 0.20.1 开始，你可以helperText和error道具
<TextField
hintText="Phone"
error ={this.state.errorText.length === 0 ? false : true }
floatingLabelText="Phone"
name="phone"
helperText={this.state.errorText}
onChange={this.onChange.bind(this)}/>
回答by Larry Maccherone
if errorText is an empty string "", then it will not be displayed. So, set it to that in getInitialState().
如果errorText 是空字符串""，则不会显示。因此，在 getInitialState() 中将其设置为该值。
回答by Ivan Bitkin
Material-UI v3.9.3 working version:
Material-UI v3.9.3 工作版：
class UserProfile extends React.Component {
constructor(props) {
super(props);
this.state = { helperText: '', error: false };
}
onChange(event) {
if (event.target.value.length > 2) {
this.setState({ helperText: '', error: false });
} else {
this.setState({ helperText: 'Invalid format', error: true });
}
}
render() {
return (
<TextField
helperText={this.state.helperText}
onChange={this.onChange.bind(this)}
error={this.state.error}
required
id="outlined-required"
label="First Name"
/>
);
}
回答by Hamza Awan
Kindly add a helperTextwhich on error state true shows up on the screen. I am sharing a link for youhttps://material-ui.com/components/text-fields/#validation
请添加一个helperText，它在错误状态下显示在屏幕上。 我正在为您分享一个链接https://material-ui.com/components/text-fields/#validation
