web-dev-qa-db-ja.com

マテリアルUIでTextFieldを無効にする方法

TextFieldコンポーネントを使用して電話番号をキャプチャしています。ユーザーが入力しているときに、数値でない場合、または形式に従っていないためerrorTextを表示する場合は、エントリを無効にします。現在、フィールドに触れなくてもerrorTextが表示されます。どうすればこの動作を実現できますか？

どんな助けも大歓迎です。

validationtextfieldmaterial-ui
15
Mo3z

Larry answerを拡張し、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)}
      />
    )
  }
}
30
Mo3z

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)}/>
21
Sam

errorTextが空の文字列 ""の場合、表示されません。そのため、getInitialState（）でそれを設定します。

4
Larry Maccherone

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


     }/>
2
VISHAL DAGA

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