반응 선택 드롭 다운 메뉴에서 입력 상자가 필요합니다.

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/