onChange 事件在移动设备上不起作用

如何解决onChange 事件在移动设备上不起作用

我遇到了一个问题，我实现了一个在 PC 上运行良好但在移动设备上运行良好的搜索网格。我已经尝试过类似问题的其他建议答案，但无济于事。在 PC 上，所有卡片都显示出来，我可以通过简单地输入输入来动态过滤它们。但是，当我在移动设备上尝试时，所有卡片都显示出来，但我无法过滤任何内容。我猜测它与输入中的 onChange 事件有关，但此时我一无所知。我正在使用带有钩子的 Reactjs。任何帮助，将不胜感激。谢谢。

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",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);
});`

解决方法

我相信它会带外壳。我也遇到过同样令人沮丧的问题（令人沮丧，因为很难发现！）。在移动设备上，设备会自动将您键入的第一个字母大写。在设置为 state 之前尝试将输入设置为小写