react-select 相关问题

在父母组件中重置数据中的多重反应钩形式实例，我无法弄清楚如何防止此

如何将select2与reactjs一起使用？ 我有这样的依赖领域

我有像这样的依赖字段 <List> <select> <option></option> <option></option> </select> <select> <option></option> <option></option> </select> <input /> </List> 如果我有5个组件。我如何将select2添加到每个组件。我在线搜索。但是找不到任何工作解决方案。 下面的codode for React-select.getting错误typeError：event.target是不确定的。 <List/> 我们正在使用thisTrapper，但是周围有太多问题。 首先，您无法在nodejs中使用该代码，因为thiseession。 其次，我们通过var React = require('react'); var ReactDOM = require('react-dom'); var Select = require('react-select'); var Page = React.createClass({ getInitialState: function () { return { firstValue: '' } }, handleFirstLevelChange : function (event) { this.setState({ firstValue: event.target.value }); }, render : function(){ var options = [ { value: '', label: 'Select an option' }, { value: 'one', label: 'One' }, { value: 'two', label: 'Two' } ]; return (<Select value={this.state.firstValue} options={options} onChange={this.handleFirstLevelChange} />) } }); ReactDOM.render(<Page />, document.getElementById('root')); 参数初始化各种Select2组件的初始化问题。这些元素中只有一个（随机）被杀死。 因此，我们要倾倒它并尽快替换为defaultValue。 Edit：我们用react-select替换。它对我们有用。 如果您使用的是react-select2-wrapper[docs]，可以通过react-select函数中的refs属性访问该节点，然后将其传递给refs：： componentDidMount 我不相信这是“反应方式”，但是如果您不想使用select2()或其他工具，这可能会有所帮助。 由于您正在使用React，最好寻找React组件而不是jQuery插件。 您可以用于Eaxmplevar Select = React.createClass({ handleChange: function () { this.prop.onChange( this.refs.myRef.value ); }, componentDidMount: function () { // Call select2 on your node var self = this; var node = this.refs.myRef; // or this.refs['myRef'] $(node) .select2({...}) .on('change', function() { // this ensures the change via select2 triggers // the state change for your component self.handleChange(); }); }, render: function () { return ( <select ref="myRef" onChange={this.handleChange}> // {options} </select> ); } }); ，它与Select2非常相似。 simple包装器 add select2 js + css in index.html，在选择输入上写包装器 react-select 如果您只是在React应用程序中使用jQuery和Select2，则只需将jQuery的cdn链接为jquery，select2在public/index.html中链接在“ head”标签中。 然后在您的src/components/component.js中。您可以使用jQuery select2这样： react-select 由于您在public/.html文件中使用CDN，因此您需要使用窗口。$用于使用jQuery。它与在html文件中使用select2相同。 function renderOptions(option_items) { if(option_items) { return Object.entries(option_items).map(function (item) { return <option key={item[0]} value={item[0]}>{item[1]}</option> }) } } class Select2Input extends Component { constructor(props) { super(props) this.ref_input = React.createRef() } /** * Add select2 bind and send onChange manually */ componentDidMount() { const self = this $(self.ref_input.current).select2({ tags: true, }).on('change', function(event) { var value = $(event.currentTarget).val() if(self.props.multiple === true) { value = List(value) } self.props.onChange(self.props.name, value) }) } /** * Emit change event for reload select2 if options has change */ componentDidUpdate(prevProps) { if(prevProps.option_items !== this.props.option_items) { $(this.ref_input.current).change() } } render() { return <select className="form-control" multiple={this.props.multiple} name={this.props.name} value={this.props.value} disabled={this.props.disabled} ref={this.ref_input}> {renderOptions(this.props.option_items)} </select> } }

如何求解SelectOptions.Some在使用异步CreatablesElect时不是一个函数？

我正在使用React -select 2.0的

反应选择自定义指示器container

React-select 无法通过仅输入项目并单击字段外来添加项目

我正在使用react-select，特别是Creatable组件。当我的用户尝试添加新项目并且只是输入该项目然后单击页面上的其他位置时，他们会感到困惑。不是这样的

使用 MultiValueContainer 删除反应选择中的项目

我使用react-select来实现多值下拉菜单，但使用我们的内部UI组件库来渲染输入框中选定的值。我正在用...覆盖 MultiValueContiner

React Select：如何强制显示下拉列表以便处理样式？

我需要处理 React Select 下拉选项的样式。我通常进行 CSS 样式工作的方式是使用 Chrome 中的开发人员工具，指向页面上的一个元素并启动

有办法从浏览器开发工具中调试反应选择下拉列表吗？

我最感兴趣的是查看使用的类名，以便我可以覆盖它们。问题是，一旦我点击任何地方，即使是在开发工具上，下拉菜单也会从 DOM 中删除，所以没有 w...

设置react-select的输入字段的字体系列

所以我尝试设置反应选择组件的输入字段的样式。不幸的是，字体系列被标准输入元素覆盖，因为样式被应用于包装...

使用react-select和react-hook-form返回正确的值

我正在使用react-hook-forms控制器api，围绕react-select中的AsyncSelect，在用户从外部API键入时加载选项。 一切正常，除了返回值回来了......

箭头键滚动在带有反应窗口的反应选择中不起作用

问题：箭头键滚动在带有反应窗口的反应选择中不起作用 我遇到一个问题，无法使用向上和向下箭头键滚动反应选择下拉列表

如何在一个字段选择下拉列表中组合两个数组选项

我想在一个字段中组合两个数组对象选项，使用reactJS中的select。这是我的代码： const DayOptions = [ {   值：'第 1 天'，   标签：“第一天” }, {   值：“第 2 天”，   标签：“第二天” ...

在react-select中的input元素前添加图标

我试图在反应选择的输入元素前面添加一个图标。我可以在占位符中获取图标，但占位符的问题是，当我从 dropdo 中选择一些数据时...

反应选择选项更新给出[对象承诺]

我在代码中使用 React Select 并尝试根据输入更新选项，但是即使在触摸下面的选择框后，我也面临着 [object Promise] 作为输入中的值的问题...

React-选择如何保持菜单打开/关闭的默认行为以及添加到单击按钮时打开的菜单？

我有一个react-select组件来在api上执行搜索，还有一个按钮来开始搜索。 我尝试在单击按钮后设置 menuIsOpen={true} 但它破坏了原始的焦点模糊行为...

自定义多选编辑器与 AG Grid getValue() 集成问题

从'react'导入React，{useState，useImperativeHandle，forwardRef，useRef，useEffect}； 导入从“react-select”中选择； 从“ag-grid-community”导入类型 { ICellEditorParams }；

React-select：如果使用 onChange，isClearable 不起作用

单击 isClearable 中的 X 图标时，下拉列表会切换，而不是清除选项。如果我没有 onChange 属性，它会清除。

react-select：如何解决“警告：Prop `id` 不匹配”

我有一个带有 ReactJs 和 NextJs 的网络应用程序。在功能组件中，我使用了反应选择，然后收到以下控制台警告： 警告：道具 ID 不匹配。服务器：“反应-

类型“ForwardedRef<HTMLInputElement>”不可分配给类型“LegacyRef<Select<Option, false, GroupBase<Option>>> |不明确的'。在反应选择中

当我在使用react-select 时在Select 组件中使用forwardRef 时，出现此TypeScript 错误。 类型“ForwardedRef”不可分配给类型 '旧版参考 当我在使用 React-Select 时在 Select 组件中使用forwardRef 时，出现此 TypeScript 错误。 Type 'ForwardedRef<HTMLInputElement>' is not assignable to type 'LegacyRef<Select<Option, false, GroupBase<Option>>> | undefined'. import Select from "react-select"; export const SelectInput = forwardRef<HTMLInputElement, SelectInputProps>( (props, ref) =>{ ... return( <div> <Select key="random-key" ref={ref} .... /> </div> ) } ) 我使用了相同的类型和带有输入元素的forwardRef，一切似乎都很好，但我在这里遇到了问题。我已经尝试了几种解决方案，例如这个 useRef TypeScript - 不可分配给类型 LegacyRef 它对我不起作用。 这是错误的完整日志 Type 'ForwardedRef<HTMLInputElement>' is not assignable to type 'LegacyRef<Select<Option, false, GroupBase<Option>>> | undefined'. Type '(instance: HTMLInputElement | null) => void' is not assignable to type 'LegacyRef<Select<Option, false, GroupBase<Option>>> | undefined'. Type '(instance: HTMLInputElement | null) => void' is not assignable to type '(instance: Select<Option, false, GroupBase<Option>> | null) => void | (() => VoidOrUndefinedOnly)'. Types of parameters 'instance' and 'instance' are incompatible. Type 'Select<Option, false, GroupBase<Option>> | null' is not assignable to type 'HTMLInputElement | null'. Type 'Select<Option, false, GroupBase<Option>>' is missing the following properties from type 'HTMLInputElement': accept, align, alt, autocomplete, and 352 more. 想找到更简单的方法吗？像这样摆脱forwardRef组件 export const SelectInput = <Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ id, name, className, //...other select input properties ...props, }: SelectInputProps<Option, IsMulti, Group> & { myRef: React.Ref<HTMLDivElement> }) => { return ( <div> <Select key="random-key" ref={props.myRef} //... /> </div> ) } 用途： interface OptionType { // convert into your own type id: number name: string } const ParentComponent = () => { const selectRef = useRef<HTMLDivElement>(null) useEffect(() => { if (selectRef.current) console.log("select component: ", selectRef.current) }, []) return ( <Select<OptionType> myRef={selectRef} options={options} //... /> ) }

react-select 去抖异步调用不显示建议

我正在使用react-select从api加载结果并使用lodash.debounce消除查询： 从'react'导入React，{useState}； 从 'react-select/lib/Async' 导入 AsyncSelect； 小鬼...