javascript 设置react CreatableSelect的最大字符输入大小

ars1skjm  于 2023-02-02  发布在  Java
关注(0)|答案(2)|浏览(95)

我正在使用creatable select来允许用户输入一个不在下拉列表中的新选项,但是看了之后,我似乎看不到一种方法,可以在creatable select中创建之前将最大输入设置为50个字符。
我已经考虑了采取新的条目,如果超过50个字符删除它,但这似乎是一个很长的路要走,并希望使用的东西是较短的实际输入时,用户选择创建。

import CreatableSelect from 'react-select/creatable';

const cars = [
  { label: "audi", value: 1 },
  { label: "bmw", value: 2 },
  { label: "ford", value: 3 },
  { label: "VW", value: 4 },
];

const selectOption = () => (
  <div className="app">
    <div className="container">
      <CreatableSelect
         options={cars} 
         placeholder={"check and enter new car name here"}
         isClearable
         onChange={(opt, meta) => console.log(opt, meta)}
      />
    </div>
  </div>
);

export default selectOption

我希望有一个最大输入选项,我只是不知道。谢谢你花时间看这个/帮助,非常感谢。

hfsqlsce

hfsqlsce1#

简单地说,你可以使用<CreatableSelect/>onCreateOption prop。你必须在组件状态下维护你的optionsvalue。然后把你的控制逻辑放在handleCreateOption函数中(对于onCreateOption prop)。你的handleCreateOption将是这样的。(查看codesandbox获得完整的代码)

handleCreateOption = inputValues => {
   if (inputValue.length < 50) {
    const newOption = createOption(inputValue);
    this.setState({
      options: [...options, newOption],
      value: newOption
    });
   }
}

代码和框:https://codesandbox.io/embed/react-codesandboxer-example-cjbgu

knpiaxh1

knpiaxh12#

如果您不希望用户能够键入超过限制的内容,则可以向输入添加maxLength属性。

import React, { useEffect, useRef } from 'react';

const myRef = useRef(null);

useEffect(() => {
myRef.current.inputRef.style.minWidth = 'max-content';
myRef.current.inputRef.placeholder = placeholderText;
myRef.current.inputRef.maxLength = 20;
}, []);

<CreatableSelect
    ref={myRef}
    {...props}
    options={options}
    value={value}
    name={name}
    onChange={handleChange}
    placeholder={''}
    classNamePrefix="multi-select-custom"
    isMulti={isMulti}
  />

相关问题