在 React 控制的组件中清除数据列表输入 onClick

IT技术 javascript reactjs html-datalist
2021-05-05 00:44:20

我在 React 控制的组件中有一个带有关联数据列表的 html5 输入。我想在单击输入字段或接收焦点时清除文本，以便显示所有选项以供选择。我在这个问题中遵循了 Alfred 的出色回答，但无法在 React 控制的组件中获得完全相同的结果。不幸的是，在 onClick 处理程序中调用 blur 会阻止我的用户输入多个字符，因为焦点（当然）丢失了。

我怎样才能保持用户可以键入但清除文本并在单击文本框时显示完整选项集的能力？

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() 从而解决了打字问题。但是，这需要我单击两次以查看完整的选项集，因为选项列表似乎在清除该框之前已显示。

2个回答

看到你对我的一个问题的评论，所以我想我会把它贴在这里作为答案。

根据您的用例，这是我认为您需要的

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处理程序来清除输入，无论输入是否已经处于焦点。

我猜您实际上希望将inputvalue作为一种状态，而不是options.

因此可能的受控组件实现应该是：

const options = ["Apples", "Oranges", "Bananas", "Grapes"];

const EMPTY_INPUT = "";

const MyForm = () => {
  const [value, setValue] = useState(EMPTY_INPUT);

  const onFocusClear = () => {
    setValue(EMPTY_INPUT);
  };

  const onChange = ({ target: { value } }) => {
    setValue(value);
  };

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

编辑数据列表示例

并使它成为一个失控的成分是通过去除非常简单onChange。现在你有了输入值ref.current.value（不是很有用的用例，只是一个例子）。

const MyForm = () => {
  const inputRef = useRef();

  const onFocusClear = () => {
    inputRef.current.value = ''
  };

  return (
    <>
      <input
        type="input"
        list="optionsList"
        onFocus={onFocusClear}
        placeholder="Select an option"
      />
      <datalist id="optionsList">
        {options.map((o) => (
          <option key={o}>{o}</option>
        ))}
      </datalist>
    </>
  );
};
其它你可能感兴趣的问题
上一篇重构 withState 如何更新props更改 下一篇如何在 React.JS 中添加 ClassName 并删除它的 onScroll 事件？