Question

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

非常感谢任何帮助。

Answer 1

扩展Larry回答，将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 2

从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)}/>

Answer 3

如果errorText为空字符串＆＃34;＆＃34;，则不会显示。所以，在getInitialState（）中将其设置为。

Answer 4

此library负责处理与验证字段相关的所有内容，并支持material-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);
                        }


     }/>

Answer 5

材料界面 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"
                    />
                     );
  }

如何使材质UI中的TextField无效

5 个答案: