Reactjs onFocus/onBlur隱藏/顯示元素

Question

我有一個兩個輸入字段，我想要的是如果我點擊第一個/如果我輸入第一個第二個字段必須隱藏。我在這裏有代碼，但我認爲在語法上有一些錯誤。對不起，我是這個語言的新手。

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其中在輸入字段的焦點之一你設置一些標誌爲假，並在焦點你設置標誌爲真。基於所述標誌您顯示第二輸入象下面這樣：

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