如何用输入框替换UUID为字符串？

Question

所以我正在尝试学习 reactJS，但卡在了一个地方。

在下面的代码中：

   import React from "react";
import { v1 as uuid } from "uuid";

const CreateRoom = (props) => {
    function create() {
        const id = uuid();
        props.history.push(`/room/${id}`);
        console.log(id);
    }

    return ([
      
        <button onClick={create}>Create room</button>
    ]);
};

export default CreateRoom;

我得到一个基本按钮，它正在创建一个带有随机 url 的房间。（例如 UUID）

如何插入用户可以输入房间名称的文本框（输入）。我通过创建一个名为 id.js 的新文件并创建一个 ID function 来尝试常规方法，但无济于事。

我做错了什么？您可以通过访问 https://vidci-vid.herokuapp.com/

查看此用例

Answer 1

一种方法是创建一个本地状态变量并将输入分配给该变量，如下所示：

  var [Text, getInput] = useState(''); // declaring state variable

// assigning input to that state
                <TextField
                  value={Text}
                  onChange={e => getInput(e.target.value)}
                />
                <ButtonBase
                  onClick={create}
                >Create Room
                </ButtonBase>

如果你想在提交后清除 UI 中的输入，只要在你的输入处理函数中这样做，一旦你的输入处理完成：

getInput('')

Answer 2

window.prompt 可能是一个简单、容易的替换选择。

The Window.prompt() displays a dialog with an optional message prompting the user to input some text.

const CreateRoom = (props) => {
    function create() {
      const id = window.prompt("Enter room id");
      props.history.push(`/room/${id}`);
      console.log(id);
    }

    return ([
      
        <button onClick={create}>Create room</button>
    ]);
};

沙盒代码

import React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import "./styles.css";

const CreateRoom = ({ history }) => {
  const create = () => {
    const id = window.prompt("Enter room id");
    history.push(`/room/${id}`);
    console.log(id);
  }

  return <button onClick={create}>Create room</button>;
};

const Room = ({ history, match }) => (
  <div>
    Room: {match.params.id}
    <button type="button" onClick={history.goBack}>
      Back to CreateRoom
    </button>
  </div>
);

export default function App() {
  return (
    <div className="App">
      <Router>
        <Switch>
          <Route path="/room/:id" component={Room} />
          <Route path="/" component={CreateRoom} />
        </Switch>
      </Router>
    </div>
  );
}

如何用输入框替换UUID为字符串？

How Do I replace UUID with string with input box?

reactjs

use-state