ReactJS：重置选择内占位符的显示答案

【问题标题】：ReactJS: Reset the display of the placeholder inside a selectReactJS：重置选择内占位符的显示
【发布时间】：2019-11-04 05:17:29
【问题描述】：

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

我试图在 select 上添加一个 ref 并给 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() 之后，选择应该显示占位符而不是最后选择的值。

【问题讨论】：

标签： reactjs jsx

【解决方案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 */
    />

【讨论】：