14

React (v16.3) アプリでは、material-ui-pickersライブラリの DatePicker コンポーネントを使用して日付ピッカー コントロールをレンダリングしています。このコンポーネントは、Material-UITextFieldコンポーネントをレンダリングします。Inputこれを変更して、 によってレンダリングされるクロムなしでマテリアル UI のみをレンダリングするようにしTextFieldます。

私が理解したように、DatePickersTextFieldComponentフィールド (ここでは下部にあります) を使用してこれを行うことができますが、このフィールドの使用方法がわかりませんでした。

 <DatePicker 
     id={name}
     TextFieldComponent={...<HOW_TO> ...}
     value={value} 
     onChange={this.handleChange}
     disabled={isReadOnly} />

これを行う方法はありますか?

更新: クロム ( 、 など) なしでレンダリングするのではなく、使用する正しい構文を見つけることで、さらに一歩前進しましFormControlInputLabel。しかし、もう DatePicker は開かれていません。プログラムで開く必要がありますか?

<DatePicker 
    id={name}
    TextFieldComponent={(props) => this.renderInput(props)}
    value={value} 
    onChange={this.handleChange}
    disabled={isReadOnly} />

そしてここに renderInput() があります:

renderInput(props: TextFieldProps): any {
   return ( <Input
     id={props.id}
     value={props.value}
     onChange={this.handleChange}
     type={'text'}
     disabled={props.disabled}
   /> );
 }
4

1 に答える 1