Question

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

EDITED：这是我现有的子组件

<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。

Answer 2

感谢您的建议，但我设法使用更简单的方法来实现这一点，这意味着我不需要使用onBlur，而只是将onInputChange存储在父级的状态中。

loader.setCrossOrigin ( value )

React-Bootstrap-Typeahead允许新的模糊选择

2 个答案: