Reactjs onFocus/onBlur hide/show要素

Question

2つの入力フィールドがあります。最初のフィールドをクリックすると、2番目のフィールドを非表示にする必要があります。私はここにコードがありますが、私は構文にいくつかの誤りがあると思います。申し訳ありません、私はこの言語では新しいです。

constructor(props) { 
    super(props); 
    this.state = {data: ''}; 
} 

onClick() { 
    this.setState({ data : 'hidden'}); 
} 

const elements = (
<div> 
    <label>Pick-up</label> 
    <PlacesAutocomplete 
     inputProps={inputProps} 
     ref="pickupVehicle" 
     value={this.state.pickup} 
     onChange={this.handlepickupVehicle} 
     onClick={this.onClick} /> 
</div> 
<div {this.state.data}> 
    <label>Drop-off</label> 
    <PlacesAutocomplete 
     inputProps={inputProps2} 
     ref="dropoffVehicle" 
     value={this.state.destination} 
     onChange={this.handledropoffVehicle} /> 
</div>); 

入力が終了した場合、またはフォーカスがオフの場合、フィールドに再度表示されます。

Answer 1

最も単純修正は：

constructor(props) { 
    super(props); 
    this.state = {data: true}; 
} 

onClick() { 
    this.setState({ data : false}); 
} 

render() { 
    const elements = (
    <div> 
     <label>Pick-up</label> 
     <PlacesAutocomplete 
     inputProps={inputProps} 
     ref="pickupVehicle" 
     value={this.state.pickup} 
     onChange={this.handlepickupVehicle} 
     onClick={this.onClick.bind(this)} /> 
    </div> 
    {this.state.data && 
    <div> 
     <label>Drop-off</label> 
     <PlacesAutocomplete 
     inputProps={inputProps2} 
     ref="dropoffVehicle" 
     value={this.state.destination} 
     onChange={this.handledropoffVehicle} /> 
    </div> 
    } 
); 

    return elements; 
} 

気づいたことにいくつかのポイントがあります：

のonClick関数を結合

• （「これは」使用することができるように）：条件付きでその状態

  によって/非表示要素のブロックを表示用this.onClick.bind(this)

• 使用{this.state.data && [JSX] }は、

さらに問題がある場合は、ここに投稿してください

Answer 2

ロジックはconditional renderingにする必要があります。ここで入力フィールドの1つにフラグをfalseに設定し、フラグをtrueに設定します。あなたは以下のような第2の入力を表示するフラグに基づいて：

render() { 
    const showSecondInput = this.state.showSecondInput; 
return (
    <input id="input1" type="text" onFocus={(e) => this.handleFocus(e)} onBlur={(e) => this.handleBlur(e)} .../> 

    {showSecondInput && 
      <input id="input2" type="text" .../> 
    } 
) 
}; 

今の関数の定義は次のようになります。あなたの質問のために

constructor(props){ 
     super(props); 
     this.state = { 
      showSecondInput : true 
     }; 
    } 

    function handleFocus(event){ 
     this.state ={ 
      showSecondInput : false 
     }; 
    } 

    function handleBlur(event){ 
     this.state ={ 
      showSecondInput : true 
     }; 
    } 

、コードの下に試してみてください。

constructor(props) { 
    super(props); 
    this.state = {data: true}; 
    this.onClick= this.onClick.bind(this); 
} 

onClick() { 
    this.setState({ data : false}); 
} 

const elements = (
<div> 
<label>Pick-up</label> 
    <PlacesAutocomplete 
     inputProps={inputProps} 
     ref="pickupVehicle" 
     value={this.state.pickup} 
     onChange={this.handlepickupVehicle} 
     onClick={this.onClick} /> 
</div> 
{this.state.data && 
    <div> 
    <label>Drop-off</label> 
     <PlacesAutocomplete 
     inputProps={inputProps2} 
     ref="dropoffVehicle" 
     value={this.state.destination} 
     onChange={this.handledropoffVehicle} /> 
</div> });