I have an issue where I implemented a search grid that works perfectly fine on PC but not on mobile devices. Ive tried other suggested answers to similar questions to no avail. On PC all of the cards show up and I can dynamically filter through them by simply typing into the input. However when I try on mobile, all of the cards show up but I cannot filter anything. Im guessing its something to do with the onChange event in the input but Im clueless at this point. I am working with Reactjs w hooks. Any help would be appreciated. Thanks.
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);
});`
question from:
https://stackoverflow.com/questions/65661900/onchange-event-doesnt-work-on-mobile-baffled 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…