html React Hooks에서ref사용하기

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html React Hooks에서ref사용하기相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone"></script>
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      const GuGuDan = () => {
        const [first, setFirst] = React.useState(Math.ceil(Math.random() * 9));
        const [second, setSecond] = React.useState(
          Math.ceil(Math.random() * 9)
        );
        const [value, setValue] = React.useState("");
        const [result, setResult] = React.useState("");
        const inputRef = React.useRef(null);

        const onChangeInput = e => {
          setValue(e.target.value);
        };

        const onSubmitForm = e => {
          e.preventDefault();
          if (parseInt(value) === first * second) {
            setResult("정답: " + value);
            setFirst(Math.ceil(Math.random() * 9));
            setSecond(Math.ceil(Math.random() * 9));
            setValue("");
            inputRef.current.focus();
          } else {
            setResult("땡");
            setValue("");
            inputRef.current.focus();
          }
        };

        return (
          <React.Fragment>
            <div>
              {first} 곱하기 {second} 는?
            </div>
            <form onSubmit={onSubmitForm}>
              <input ref={inputRef} value={value} onChange={onChangeInput} />
              <button>입력!</button>
            </form>
            <div id="result">{result}</div>
          </React.Fragment>
        );
      };
    </script>
    <script type="text/babel">
      ReactDOM.render(
        <React.Fragment>
          <GuGuDan />
        </React.Fragment>,
        document.querySelector("#root")
      );
    </script>
  </body>
</html>

以上是关于html React Hooks에서ref사용하기的主要内容，如果未能解决你的问题，请参考以下文章

三和 韓長庚 先生의 寫眞

text 如何：Vscode를Github序列编辑器로사용하기

html PC사이트에서특정상품에대한리뷰를으으으볼수있도록하는자바스크립트

markdown SVN에서Git으로전환하기（브랜치와태그보전하면서）

c_cpp 람다함수를함수의파라미터로사용하기

c_cpp 에디터플러그인에서world구하기