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

ars1skjm 于 2023-02-02 发布在 Java

关注(0)|答案(2)|浏览(96)

我正在使用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

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

JavaScript

来源：https://stackoverflow.com/questions/57693482/set-maximum-character-input-size-of-react-creatableselect

2条答案

按热度按时间

hfsqlsce1#

简单地说，你可以使用<CreatableSelect/>的onCreateOption prop。你必须在组件状态下维护你的options和value。然后把你的控制逻辑放在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

赞(0）回复(0）举报 2023-02-02

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}
  />

赞(0）回复(0）举报 2023-02-02

我来回答

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

2条答案

相关问题

热门标签

最新问答