Reactjs onFocus/onBlur hide/show element

问题

I have a two input field what I want is if I click the first one/ if I input the first one the 2nd field must be hidden. I have the codes here but I think I have some error in the syntax. sorry, i'm new in this language.

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

and then if he has done inputting or the focus is out then the field show it again.

回答1:

The simplest fix is:

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

There's some points to be noticed:

• binding the onClick function (so that the "this" can be used): this.onClick.bind(this)

• use {this.state.data && [JSX] } for conditionally show/hide element block by its state

If you have further issues, please post here so we can get through together!

回答2:

You should have logic for conditional rendering where on focus of input field one you set some flag to false, and on focus out you set the flag to true. Based on the flag you display second input like below:

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

Now the functions definitions should look like:

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

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

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

For your question, try below 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> } );

来源：https://stackoverflow.com/questions/45726037/reactjs-onfocus-onblur-hide-show-element