时间戳

首页 > 解决方案 > 如何预填充搜索栏并让用户更改值？

javascript - 如何预填充搜索栏并让用户更改值？

问题描述

我有一个简单的搜索栏，我想用一些数据预先填充它。我试过使用value但它不允许用户之后更改搜索栏中的值。

<input type="search" class="navBarSearchForm3 form-control rounded searchterm2" placeholder="search term" value={comparelinks}></input>

我希望搜索栏已经有一个值并让用户能够更改它。我需要一些 JS 还是可以只用 HTML 来完成？

标签： javascripthtmlreactjs

解决方案

您缺少更改的句柄。因此，当用户更改输入内容时，您需要编辑该值：

在这种情况下，我会使用 React Hooks (useState) 来设置一个默认值并能够更改它。

最后，在用户输入时使用 seCompareLinks onChange。

你可以看到它在这里工作：https ://codesandbox.io/s/practical-dewdney-wj7j2?file=/src/App.js:0-543

import React from 'react'; 
import "./styles.css";

export default function App() {
  const [comparelinks, setComparelinks] = React.useState('default value');

  const handleChange = (e) => {
    setComparelinks(e.target.value);
  }

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <input type="search" class="navBarSearchForm3 form-control rounded searchterm2" placeholder="search term" value={comparelinks} onChange={handleChange}></input>

    </div>
  );
}

推荐阅读