使用用户输入响应更改 iframe src

Question

I want to be able to change an iframe src with the help of react but i don't know were to start as i am new to coding in general.

I manage to build what i want with html and js but it is not working when i dump the code in a react project.

edit: I tried converting html and js to jsx with an online convertor but it did not work.

Please see how code below works and point me to the right direction please.

 <input type="number" id="book"></input> <input type="number" id="page"></input> <button type="button" onClick="goBook();">Submit</button> <iframe id="myBook" src="https://www.google.com" height="720" width="1280" frameborder="0" scrolling="no" allowfullscreen="true"> </iframe> <script> function goBook(){ document.getElementById("myBook").src = "https://www.example.com/b="+document.getElementById("book").value+"&p="+document.getElementById("page").value; } </script>

please someone help me!

Answer 1

You need to start with create-react-app.

After you get the basic react application template, Go to App.js and write this code:

import "./styles.css";
import { useState } from "react";

export default function App() {
  const [srcURL, setsrcURL] = useState("https://www.google.com");
  const [book, setBook] = useState(null);
  const [page, setPage] = useState(null);

  const handleSubmit = () => {
    if (book && page) {
      setsrcURL(`${"https://www.google.com"}/b=${book}&p=${page}`);
    }
  };

  return (
    <div className="App">
      <input
        type="number"
        name="book"
        placeholder="Book Number"
        onChange={(e) => setBook(e.target.value)}
      />
      <input
        type="number"
        placeholder="Page Number"
        name="page"
        onChange={(e) => setPage(e.target.value)}
      />
      <button type="button" onClick={handleSubmit}>
        Submit
      </button>
      <iframe
        name="myBook"
        src={srcURL}
        height="720"
        width="1280"
        frameBorder="0"
        scrolling="no"
        allowFullScreen={true}
      />
    </div>
  );
}

Answer 2

My Answer was deleted so. I'll just copy paste here.

import { useRef, useState } from "react";

export default function App() {
  const googleUrl = "https://www.google.com";

  const refBook = useRef(null);
  const refPage = useRef(null);
  const refIframe = useRef(null);
  const [iframSrc, setIframeUrl] = useState(googleUrl);

  const goBook = () => {
    setIframeUrl(
      `${googleUrl}/b=${refBook.current.value}&p=${refPage.current.value}`
    );
  };

  return (
    <div className="App">
      <input type="number" ref={refBook}></input>
      <input type="number" ref={refPage}></input>
      <button type="button" onClick={goBook}>
        Submit
      </button>
      <iframe
        title="myBook"
        src={iframSrc}
        height="720"
        width="1280"
        frameBorder="0"
        scrolling="no"
        allowFullScreen={true}
        ref={refIframe}
      ></iframe>
    </div>
  );
}