onChange事件无法在移动设备上运行

Question

我遇到了一个问题，我实现了一个搜索网格，它在PC上运行得很好，但在移动设备上运行得不好。对于类似的问题，我尝试了其他建议的答案，但都无济于事。在电脑上，所有的卡片都会显示出来，我只需在输入中输入即可动态过滤。然而，当我在手机上尝试时，所有的卡都会显示出来，但我无法过滤任何内容。我猜这与输入中的onChange事件有关，但目前我一无所知。我正在使用Reactjs w hooks。如有任何帮助，我们将不胜感激。谢谢

function App() {
const [postSearch, setPostSearch] = useState({
title: "",
content: "",
});
function dynaSearch(event) {
const { name, value } = event.target;
setPostSearch((prevPostSearch) => {
console.log(prevPostSearch);
return {
...prevPostSearch,
[name]: value,
};
});
}
...
<form>
<input
style={{
margin: "1rem 0rem 1rem 0rem",
border: 0,
height: "3rem",
borderRadius: "10px 0rem 0rem 10px",
}}
value={postSearch.title}
name="title"
type="text"
placeholder="  Search for a Wiki ...  🔎"
onChange={dynaSearch}
onTouchEnd={dynaSearch}
></input>
<button
style={{
margin: "1rem 0rem 1rem 0rem",
border: 0,
height: "3.18rem",
width: "4rem",
borderRadius: "0rem 10px 10px 0rem",
color: "#D4EDF7",
backgroundColor: "#4424D6",
fontWeight: 800,
}}
>
Submit
</button>
</form>
<hr></hr>
</div>
<div className="post">
<DataFetching search={postSearch.title} />
</div>
...
const filteredPosts = posts.filter((post, index) => {
return post.title.toLowerCase().includes(props.search);
});`

Answer 1

我相信它将与套管一起使用。我也经历过同样令人沮丧的问题(令人沮丧，因为很难发现！(。在移动设备上，设备会自动将您键入的第一个字母大写。在设置为状态之前，请尝试将输入设置为小写