Как заменить 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;

Я получаю базовую кнопку c, которая создание комнаты со случайным URL-адресом (например, UUID)

Как мне вставить текстовое поле (Ввод), в которое пользователь может ввести имя комнаты. Я пробовал обычные методы, создав новый файл с именем id.js и создавая ID function, но безрезультатно.

Что я делаю не так? Вы можете проверить этот вариант использования, посетив https://vidci-vid.herokuapp.com/

Answer 1

window.prompt может быть простой и простой заменой.

Window.prompt() отображает диалоговое окно с дополнительным сообщением, предлагающим пользователю ввести текст.

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>
    ]);
};

Sandbox code

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 Create room;
};

const Room = ({ history, match }) => (
  
    Room: {match.params.id}
    
      Back to CreateRoom
    
  
);

export default function App() {
  return (
        ); } 

Answer 2

один из способов - создать локальную переменную состояния и назначить ввод этой переменной следующим образом:

  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>

И если вы хотите очистить ввод в пользовательском интерфейсе после отправки, просто сделайте это в своем вводе функция обработки после завершения обработки ввода:

getInput('')