如何预填充一个搜索栏，让用户改变值?

Question

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

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

我想搜索栏已经有一个值，让用户能够改变它。我需要一些JS为它或它可以用HTML完成吗?

Answer 1

您错过了更改的句柄。所以，当用户改变输入时，你需要编辑这个值它就像:

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

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

你可以看到它在这里工作: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>
);
}

Answer 2

考虑到使用钩子，您还必须处理输入的更新:

const [comparelinks, setCompareLinks] = useState()
const handleChange = (event) => {
setCompareLinks(event.target.value)
}
<input type="search" class="navBarSearchForm3 form-control rounded searchterm2" placeholder="search term" value={comparelinks} onChange={handleChange}></input>