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”就可以使用了）：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> } );