反応選択オプションドロップダウン内に入力ボックスが必要

Question

ドロップダウンメニューの中に入力ボックスが必要な状況です。 シナリオでは、ドロップダウンで新しいオプションを作成する必要がありますが、私はreact selectのカスタムタグ作成機能を使用できません。

私はカスタムオプションレンダラーコンポーネントを渡すことができ、私は同じことを伝えました。そして、私のオプションコンポーネントの中に入力ボックスを置くと、入力ボックスのコントロールを取得できませんでした。

添付の写真は私のオプション内の入力を示しているが、私は、入力ボックスをクリックしたとき、私はそれ以上の制御を取得しておりません。

マイDeleteComponent.tsx - >

import { showDeleteConcernModal } from '../../../actions/modalActions'; 
import { deleteConcernType } from '../../../actions/summaryActions'; 
import { ISelectOptions } from '../../../interfaces'; 
import * as React from 'react'; 
import { FormControl } from 'react-bootstrap'; 

export interface IDeleteOptionsProps { 
    className?: string; 
    isDisabled?: boolean; 
    isFocused?: boolean; 
    isSelected?: boolean; 
    onFocus?: Function; 
    onSelect?: Function; 
    option?: ISelectOptions; 
} 

export class DeleteOptions extends React.PureComponent<IDeleteOptionsProps, {}> { 
    constructor() { 
     super(); 
    } 

    handleMouseDown = (event) => { 
     event.preventDefault(); 
     this.props.onSelect(this.props.option, event); 
    } 

    handleMouseEnter = (event) => { 
     event.preventDefault(); 
     this.props.onFocus(this.props.option, event); 
    } 

    handleMouseMove = (event) => { 
     event.preventDefault(); 
     this.props.onFocus(this.props.option, event); 
    } 

    handleOptionDelete = (value) => { 
     showDeleteConcernModal('oi-form', value); 
    } 

    handleChange = (event) => { 
     console.log('>> event.target.value', event.target.value); 
    } 

    render() { 
     return (
      <div className={this.props.className} 
       onMouseEnter={this.handleMouseEnter} 
       onMouseMove={this.handleMouseMove} 
      > 
       <div style={{ textAlign: 'left', width: '80%', display: 'inline-block' }}> 
        <FormControl 
         type="text" 
         onChange={this.handleChange} 
        /> 
       </div> 
       <div 
        onMouseDown={() => { this.handleOptionDelete(this.props.children); }} 
        className="delete-option" 
        style={{ textAlign: 'right', width: '20%', display: 'inline-block' }} 
       > 
        <i className="fa fa-times" aria-hidden="true"></i> 
       </div> 
      </div> 
     ); 
    } 
} 

Answer 1

あなたは、彼らがまだ右存在しない場合は、新しいオプションを作成できるようにする必要がありますか？

はい、その後、これをしようとした場合：https://github.com/JedWatson/react-select

作成可能なコンポーネントが反応し、選択中の新しいタグを作成することができます。これはSelectを飾るので、いくつかのカスタムオプション（下記参照）に加えて、すべてのデフォルトプロパティ（シングル/マルチモード、フィルタリングなど）をサポートしています。それを使用する最も簡単な方法はそうのようなものです：

import { Creatable } from 'react-select'; 

function render (selectProps) { 
    return <Creatable {...selectProps} />; 
}; 

デモ：あなたの適切な解決策は、私は、この作成可能なタグを認識していhttps://jedwatson.github.io/react-select/