error
Material-UI Nextのテキストフィールドプロパティを使いたいリンク、propsタイプは ですboolean
。以前のバージョンのMaterial-UI props名は でerrorText
、propsタイプはnode
リンク。
Textfield Material-UI の以前のバージョン ( errorText
props を使用) :
<TextField
name='name'
floatingLabelText='Name'
hintText='Type your name'
value={this.state.fields.name}
onChange={this.onChange}
errorText={this.state.error}
/>
以前のバージョンの Material-UIではerrorText
、このコードはエラー状態の表示に適切に機能します。
Textfield Material-UI Next のerror
props の使用:
<TextField
name='name'
label='Name'
placeholder='Type your name'
value={this.state.fields.name}
onChange={this.onChange}
error={true} //only accept true or false value
/>
Material-UI Next のerrorText
プロパティはerror
ブール型に変更され、true または false 値のみを受け入れます。error
プロパティを true に設定すると、テキストフィールドには常にエラー状態が表示されます。特定の条件下でエラー状態を表示したいだけです。
this.state.error
Material-UI の次のテキストフィールドでエラー状態を使用するにはどうすればよいですか?
ベストアンサー1
React コンポーネントの状態を使用すると、TextField
値を保存し、それをエラーのインジケーターとして使用できます。Material-UI は、エラーをインタラクティブに表示するためのerror
およびプロパティを公開します。helperText
次の例を見てください。
<TextField
value={this.state.text}
onChange={event => this.setState({ text: event.target.value })}
error={text === ""}
helperText={text === "" ? 'Empty field!' : ' '}
/>