Question

我已经在我的React应用程序中为一个选择框实现了多个数据列表，但是结果下拉列表变得太大了（通常超过100个选项）。

问题：如何限制数据列表中显示的选项，但仍代表所有选项？

到目前为止我尝试过的示例：

const App = () => {

  const [inp, setInp] = useState("")
  const [longTestList, setLongTestList] = useState([])

  const addLotsOfData = () =>{
    let y = [...longTestList]
    for (let i = 0; i < 101; i++){
      y.push(String(i))
        }
        setLongTestList(y)
      }

    const testInputHandler = event => {
      setInp(event.target.value)
    }

return (
    <div>
     <button onClick = {addLotsOfData}>+</button>
      <input list = "test_a" id = "test_b" 
             name = "test_b" onChange = {testInputHandler} value = {inp}/>
        <datalist id = "test_a">
         {longTestList.map(function(item, i){
              if (i < 10){ return <option key={item} value={item}/>}
               })}
        </datalist>
     </div>
    )
}

但是这样做了，所以我不能从选项中选择索引10以上的任何条目。有没有办法告诉React在开始时只显示约10个选项，并在用户输入内容时缩小这些选项的范围？

限制React Datalist中显示的选项（无jquery）

0 个答案: