2017-08-17 268 views
0

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

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

然後,如果他已經完成輸入或焦點不在那麼該字段再次顯示它。

+0

您發佈的代碼在語法上不正確。你在'React.Component'類定義的主體內部有'jsx'語句... – Pineda

+0

哦,對不起,我忘了補充說該字段在函數內部。我的錯。 – Deee

+0

@Deee請添加更多代碼,我們可以看到'render'函數 –

回答

0

最簡單解決方法是:

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] }有條件地顯示其狀態

    /隱藏元素塊

如果您還有其他問題,請在這裏發帖,這樣我們就可以在一起!

0

你應該有邏輯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> }); 
+0

謝謝,先生,但仍然沒有按預期工作。 :( – Deee

+0

這可能是因爲當傳遞onClick,onFocus等事件處理程序時,您需要與此綁定,如:this.handlepickupVehicle = this.handlepickupVehicle.bind(this)in constructor。 –

+0

我已經完成了這個先生,但是,仍然不好輸出。 – Deee