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

【问题标题】：React-Bootstrap-Typeahead allowNew select-on-blurReact-Bootstrap-Typeahead 允许新的模糊选择
【发布时间】：2017-12-09 15:44:17
【问题描述】：

是否可以进行配置，以便在设置 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>

【问题讨论】：

您在寻找什么行为，当前行为如何不符合您的要求？如果您将空数组传递给options，用户输入的任何内容都将被视为新的，但他们仍需要从菜单中选择选项。
嗨@ericgio 我希望用户能够在该字段中输入，如果选项中不存在它，当您失去焦点时，它们将被归类为新的 - 您不必选择新的菜单中的项目
所以你真正要问的是选择模糊行为。您可以编辑您的问题以澄清这一点吗？

标签： reactjs react-bootstrap-typeahead

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

【讨论】：

谢谢@ericgio。我的组件目前是 FSC。将其作为道具传递的最佳方法是什么，或者我应该转换为基于类的组件？
您可以将状态向上移动到父级，但根据 React 的经验法则，状态不应移动到高于绝对需要的位置。我不知道你的代码是什么样子的，所以你需要成为那里的最终法官。如果将状态向上移动到父级，则可以将所有内容作为道具传递给 FSC，例如：props.onBlur、props.onChange 等。
谢谢。我想我会转换为基于类的
抱歉，@ericgio 很暗淡，但我已将其转换为基于类的组件，无法使其与我传递的道具一起使用。你愿意传递任何智慧的话吗？我用我的代码编辑了这个问题，没有 onBlur 功能
@NickWild：对于初学者，您的代码没有onBlur 回调，因此当您模糊输入时不会发生任何事情。您还需要一个 onInputChange 回调来跟踪文本输入值的状态。

【解决方案2】：

感谢您的建议，但我设法用一种更简单的方法来解决这个问题，这意味着我不需要使用 onBlur，我只需将 onInputChange 存储在父级的状态中即可。

  const {campaignOptions, campaignValue, campaignName} = this.props;

  ...

<Typeahead
    labelKey="label"
      allowNew
      placeholder="Campaign Name..."
      onInputChange={campaignName}
      options={campaignOptions}
      selected={campaignValue}
/>

【讨论】：