小编Abi*_*idh的帖子

我想自定义文件上传的输入标签。这是我的代码。这里对于属性 htmlFor，我给出了输入标签的 id。然后它就可以工作了。但是我想使用 useRef ref。我怎样才能做到这一点 ？如果我按照下面的方法，如果我多次渲染这个组件就会有问题。对 ？

const App = () => {
  const inputRef = useRef(null);
  const [file, setFile] = useState(null);
  return (
    <>
      <input
        ref={inputRef}
        accept=".pdf"
        style={{ display: "none" }}
        id="raised-button-file"
        multiple
        type="file"
        onChange={e => {
          setFile(e.target.files[0]);
        }}
      />
      <label htmlFor="raised-button-file">
        <button component="span">
          <span>file</span>
        </button>
      </label>
    </>
  );
};

我想向输入字段添加验证。我正在使用反应钩子形式。验证应类似于字段总和应为 100。如果任何字段使总和大于或小于 100，则应在输入字段（最后编辑的字段）处显示错误。

沙箱网址： https://codesandbox.io/s/distracted-elion-z2wob ?file=/src/App.js

谢谢