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的逻辑，在输入字段的焦点上你将一些标志设置为false，并在焦点输出时将标志设置为true。根据标志显示第二个输入，如下所示：

std::variant

现在函数定义应如下所示：

boost::variant

对于您的问题，请尝试以下代码：

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

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函数（以便＆＃34;此＆＃34;可以使用）：this.onClick.bind(this)
使用{this.state.data && [JSX] }通过状态有条件地显示/隐藏元素块

如果您还有其他问题，请在此发布，以便我们共同完成！

Reactjs onFocus / onBlur隐藏/显示元素

2 个答案: