onChange 事件在移动设备上不起作用感到困惑

Question

我有一个问题，我实现了一个在 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",
          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

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

之前尝试将输入设置为小写

onChange 事件在移动设备上不起作用感到困惑

onChange event doesnt work on mobile baffled

reactjs

mobile

onchange