入力の任意の場所をクリックした後でカレンダーウィジェットを開くことができますか？

Question

私は日付ピッカーのReactコンポーネントを開発中です。具体的には、誰かが入力内のどこかをクリックするたびに、矢印アイコンだけでなく、HTML5の日付入力でカレンダーウィジェットを開こうとしています。私の現在のコードは以下の通りですが、矢印をクリックしない限り何らかの理由でカレンダーが開かないでしょう。私もF4のキーボードイベントを無駄に送信しようとしました。

class DateInput extends React.Component { 
    private input; 

    onClick = e => { 
    if (this.input) { 
     this.input.focus(); 
    } 
    } 

    render() { 
    const { value, onChange } = this.props; 

    return (
     <input 
     ref={input => (this.input = input)} 
     type='date' 
     value={value} 
     onChange={onChange} 
     onClick={this.onClick} /> 
    ); 
    } 
} 

Answer 1

は、私はあなたがこの入力の上に<View>コンポーネントを置くことを提案し、以下のコードのようにそれにonClickイベントを置く：

class DateInput extends React.Component { 
    private input; 

    onClick = e => { 
    if (this.input) { 
     this.input.focus(); 
    } 
    } 

    render() { 
    const { value, onChange } = this.props; 

    return (
     <View onClick={this.onClick = this.onClick.bind(this)}> 
     <input 
     ref={input => (this.input = input)} 
     type='date' 
     value={value} 
     onChange={onChange} 
     onClick={this.onClick} /> 
     </View> 
    ); 
    } 
}