在react-select选项下拉列表中需要一个输入框

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

Creatable组件使用户能够在react-select中创建新标签。它装饰了一个Select，因此它支持所有默认属性（例如单/多模式，过滤等）以及一些自定义属性（如下所示）。最简单的使用方法是：

import { Creatable } from 'react-select';

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

演示：您的合适解决方案是从https://jedwatson.github.io/react-select/创建自定义标签