时间戳

首页 > 解决方案 > 如何将 UUID 替换为带有输入框的字符串？

reactjs - 如何将 UUID 替换为带有输入框的字符串？

问题描述

所以我正在尝试学习 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/查看此用例

标签： reactjsuse-state

解决方案

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

  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('')

推荐阅读