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

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/ 创建自定义标签