如何在空输入字段的开头添加React工具提示

Question

import React from 'react';
import ReactTooltip from 'react-tooltip';


const DataInputBox = () => {

  return (
      <div>     
        <ReactTooltip id="title required"effect="solid" place="bottom" >
           "Title required"
        </ReactTooltip>
        <input
          type="text"
          data-tip
          data-for="title required"
          placeholder="Type title"
          name="title"
        />
    </div>
  );
}

export default DataInputBox;

无法在输入box.Can底部开始时获得工具提示任何人请帮助我在光标开始时获得工具提示。

Answer 1

您需要向input元素添加ref并将此引用传递给ReactTooltip.show()方法。

const DataInputBox = () => {
  const inputRef = React.useRef(null)

  React.useEffect(() => {
       ReactTooltip.show(inputRef.current);
  }, []);

  return (
    <div>
      <ReactTooltip id="title required" efect="solid" place="bottom">
        "Title required"
      </ReactTooltip>
      <input
        type="text"
        ref={inputRef}
        data-tip
        data-for="title required"
        placeholder="Type title"
        name="title"
      />
    </div>
  );
}