Reactjs onFocus/onBlur 隐藏/显示元素 [英] Reactjs onFocus/onBlur hide/show element

问题描述

我有两个输入字段，我想要的是，如果我单击第一个/如果我输入第一个，则必须隐藏第二个字段.我这里有代码，但我想我的语法有一些错误.抱歉，我是这种语言的新手.

构造函数(道具){超级(道具)；this.state = {数据:''};}点击(){this.setState({数据:'隐藏'});}const 元素 = (<div><label>取件</label><地方自动完成inputProps={inputProps}参考 =皮卡车辆"值={this.state.pickup}onChange={this.handlepickupVehicle}onClick={this.onClick}/>

<div {this.state.data}><label>Drop-off</label><地方自动完成inputProps={inputProps2}ref="dropoffVehicle"值={this.state.destination}onChange={this.handledropoffVehicle}/>

);

然后如果他已经完成输入或焦点已消失，则该字段再次显示.

解决方案

最简单的解决方法是:

构造函数(道具){超级(道具)；this.state = {数据:真}；}点击(){this.setState({ data : false} );}使成为() {const 元素 = (<div><label>取件</label><地方自动完成inputProps={inputProps}参考 =皮卡车辆"值={this.state.pickup}onChange={this.handlepickupVehicle}onClick={this.onClick.bind(this)}/>

{this.state.data &&<div><label>Drop-off</label><地方自动完成inputProps={inputProps2}ref="dropoffVehicle"值={this.state.destination}onChange={this.handledropoffVehicle}/>

});返回元素；}

有几点需要注意:

• 绑定 onClick 函数(以便可以使用this"):this.onClick.bind(this)

• 使用 {this.state.data &&[JSX] } 用于按状态有条件地显示/隐藏元素块

如果您还有其他问题，请在此处发帖，以便我们一起解决！

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.

解决方案

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!

这篇关于Reactjs onFocus/onBlur 隐藏/显示元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！