ReactJS:在选择中重置占位符的显示

Question

在我的选择中选择一个选项(使用react-select(后，我使用"onChange"回调道具使用所选值执行某些操作。我想在选择中显示初始占位符，而不是用户选择的选项。

我试图在选择上添加一个引用并给 select.value 一个空值，但什么也没发生。

addTravellers(event){
    this.setState({travellers : this.state.travellers.concat(event.value)},()=>this.checkPax(this.state.travellers));
  }
<Select 
        options={ages}
        placeholder={"my placeholder"}
        className={s.selector}
        onChange={(e) => this.addTravellers(e)}
        ref={this.refSelect}
        /> 

我想要的结果是在调用addTravellers()后，选择应该显示占位符而不是最后一个选定的值。

Answer 1

如果我

理解正确，您希望在用户选择一个选项时触发onChange回调，但是您希望占位符保持可见，而不管用户选择如何 - 在这种情况下，一个简单的解决方案是强制null作为<Select />的value道具，这将导致占位符在选项选择发生后保持可见：

<Select 
    options={ages}
    placeholder={"my placeholder"}
    className={s.selector}
    onChange={(e) => this.addTravellers(e)}
    value={ null } /* <-- add this */
    /* ref={this.refSelect} Not needed */
    />