reactjs - React-Bootstrap-Typeahead allowNew 选择模糊

Question

是否可以配置它以便在设置 allowNew 时在模糊时选择该字段中的任何新条目而不是单击新项目“菜单”

编辑:这是我现有的子组件

<Typeahead
   labelKey="label"
   allowNew
   selectHintOnEnter
   options={props.campaignOptions}
   placeholder="Campaign Name..."
   onChange={props.campaignName}
 />

这是我的父组件...

campaignName (campaign){
  campaign.length ? this.setState({campaignSelected:campaign}) : this.setState({campaignSelected:''})
  }

...

<FormGroup>
    <Campaign
     campaignName={this.campaignName.bind(this)}
     campaignOptions={[...new Set(this.props.records.map(options => options.campaign))]}/>
 </FormGroup>

Answer 1

在单选情况下是可能的。方法如下:

class MyComponent extends React.Component {
  state = {
    selected: [],
    text: '',
  };

  render() {
    const {selected, text} = this.state;

    return (
      <Typeahead
        allowNew
        onBlur={(e) => this.setState({selected: text ? [text] : []})}
        onChange={selected => this.setState({selected})}
        onInputChange={(text) => this.setState({text})}
        options={this.props.options}
        selected={selected}
      />
    );
  }
}

请注意，上面的代码只是将输入值设置为选择。您很可能希望将字符串转换为具有唯一标识符(如 ID)的对象。

在多选情况下无法执行此操作，因为您需要在选择文本后清除文本输入(而不是选择)，并且没有用于执行此操作的 API。