如何使 Material UI 中的 TextField 无效

Question

我正在使用 TextField 组件来捕获 phone 号码。当用户输入时，如果输入不是数字或不符合格式并显示错误文本，我想使输入无效。目前即使不触及该字段也会显示 errorText。我怎样才能实现这种行为？

非常感谢任何帮助。

Answer 1

如果errorText为空字符串""，则不会显示。因此，将其设置为 getInitialState() 中的值。

Answer 2

扩展答案，将 errorText 设置为属性状态（下例中的 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)}
      />
    )
  }
}

Answer 3

从 0.20.1 开始，您可以 helperText 和 error props

<TextField 
    hintText="Phone"
    error ={this.state.errorText.length === 0 ? false : true }
    floatingLabelText="Phone"
    name="phone"
    helperText={this.state.errorText}
    onChange={this.onChange.bind(this)}/>

Answer 4

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"
                    />
                     );
  }

如何使 Material UI 中的 TextField 无效

How to invalidate a TextField in Material UI

javascript

validation

material-ui

textfield