javascript - 在React控制组件中清除datalist输入onClick

Question

我有一个 html5 输入，在 React 控制的组件内有一个关联的数据列表。我想在单击输入字段或获得焦点时清除文本，以便显示所有选项以供选择。我遵循了阿尔弗雷德在this question中的出色回答但我无法在 React 控制的组件中实现完全相同的结果。不幸的是，在 onClick 处理程序中调用模糊会阻止我的用户输入多个字符，因为焦点(当然)丢失了。

如何保持用户在单击文本框时键入但清除文本并显示完整选项集的能力？

import React, { useState } from "react";

const MyForm = () => {
  const [options, setOptions] = useState(["Apples", "Oranges", "Bananas", "Grapes"]);

  const handleChange = (event) => {
    event.target.blur();
  };

  const clear = (event) => {
    event.target.value = "";
  };

  return (
    <>
      <input
        type="input"
        list="optionsList"
        onChange={handleChange}
        onFocus={clear}
        placeholder="Select an option"
      />
      <datalist id="optionsList">
        {options.map((o) => (
          <option key={o}>{o}</option>
        ))}
      </datalist>
    </>
  );
};

export default MyForm;

请注意，我还尝试了一个调用clear onClick 而不是onFocus 的版本。这使我不需要在handleChanges中调用blur()，从而解决打字问题。但是，这要求我单击两次才能查看完整的选项集，因为选项列表似乎在清除框之前就已显示。

Answer 1

看到您对我的一个问题的评论，所以我想我应该将其发布在这里作为答案。

根据您的用例，我认为您将需要以下内容

import React, { useState } from "react";

const MyForm = () => {
  const [options, setOptions] = useState(["Apples", "Oranges", "Bananas", "Grapes"]);

  const handleChange = (event) => {
    if (!event.nativeEvent.inputType) {
      event.target.blur();
    }
  };

  const clear = (event) => {
    event.target.value = "";
  };

  return (
    <>
      <input
        type="input"
        list="optionsList"
        onChange={handleChange}
        onClick={clear}
        onFocus={clear}
        placeholder="Select an option"
      />
      <datalist id="optionsList">
        {options.map((o) => (
          <option key={o}>{o}</option>
        ))}
      </datalist>
    </>
  );
};

export default MyForm;

为了防止 handleChange 正常阻止文本输入，您必须检查 event.nativeEvent.inputType，因为 onChange 已触发单击 datalist 将不会有 inputType 值。因此，在这种情况下，我们只会在由 datalist 填充时执行输入模糊，并为任何其他事件保留焦点。

我还添加了一个额外的 onClick 处理程序来清除输入，无论输入是否已获得焦点。