Material UIのTextFieldを無効にする方法

Question

TextFieldコンポーネントを使用して電話番号を取得しています。ユーザーが入力しているときに、番号でない場合、または形式に従わずにerrorTextを表示している場合は、その項目を無効にしたいと考えています。現在、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

errorTextが空の文字列 ""の場合、表示されません。したがって、getInitialState（）の値に設定します。

Answer 3

この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); 
         } 


    }/>