Reactjs onFocus/onBlur hide/show 元素

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

您应该具有 conditional rendering 的逻辑，其中在输入字段 1 的焦点上将一些标志设置为 false，在焦点外将标志设置为 true。根据您显示第二个输入的标志，如下所示：

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

Answer 2

最简单的修复方法是：

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] } 有条件地 show/hide 元素块的状态

如果您还有其他问题，请post在这里，我们一起解决！

Reactjs onFocus/onBlur hide/show 元素

Reactjs onFocus/onBlur hide/show element

javascript

show-hide

reactjs

react-redux