Reactjs onFocus/onBlur cacher/montrer l'élément

Question

J'ai un champ d'entrée à deux ce que je veux est si je clique sur le premier/si je saisis le premier le deuxième champ doit être caché. J'ai les codes ici mais je pense que j'ai une erreur dans la syntaxe. désolé, je suis nouveau dans cette langue.

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

puis, s'il a effectué une entrée ou si la mise au point est terminée, le champ l'affiche à nouveau.

Answer 1

Le plus simple correction est:

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

Il y a quelques points à remarquer:

• liant la fonction onClick (de sorte que le « ce » peut être utilisé): this.onClick.bind(this)

• utilisation {this.state.data && [JSX] } montrer conditionnellement/bloc d'élément de peau par son état

Si vous avez d'autres problèmes, s'il vous plaît poster ici afin que nous puissions passer à travers ensemble!

Answer 2

Vous devez avoir une logique pour conditional rendering lorsque, au foyer du champ de saisie un, vous définissez un drapeau sur false, et lorsque vous désactivez le focus, vous définissez l'indicateur sur true. Basé sur le drapeau que vous affichez deuxième entrée comme ci-dessous:

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" .../> 
    } 
) 
}; 

Maintenant, les définitions de fonctions devrait ressembler à:

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

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

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

Pour votre question, essayez ci-dessous le code:

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