我一直在構建 URL Shortner。所以在前端我嘗試構建像 Cut.ly 這樣的輸入框。例如，首先，我將有一個帶有縮短按鈕的空輸入框。當我發布長 URL 并按下提交時，它將有條件地呈現另一個輸入框，其中包含短 URL 并帶有復制按鈕。我已經實作了這個邏輯。現在我想要做的是在短 URL 輸入框中，每當我執行任何按鍵操作時，它都會使用 Shorten 按鈕呈現輸入框。那么，我該如何實作這個邏輯呢？作為參考，我發布了一個演示視頻。
到目前為止，這是我的代碼。我正在使用 React Hook Form 進行表單管理。
const CreateUrl = ({ match }) => {
const [shortUrl] = useState('https://cutt.ly/wUBnKby');
const [isSubmitted, setIsSubmitted] = useState(false);
const {
register,
handleSubmit,
reset,
formState: { errors },
} = useForm({
criteriaMode: 'all',
mode: 'onChange',
});
const onSubmit = (data) => {
console.log(data);
reset('', {
keepValues: false,
});
setIsSubmitted(true);
};
return (
<div className="create__url">
<Row>
<Colxx xxs="12">
<Breadcrumb heading="menu.createUrl" match={match} />
<Separator className="mb-5" />
</Colxx>
</Row>
<Row>
<Colxx xxs="12" mt="4">
{!isSubmitted ? (
<form onSubmit={handleSubmit(onSubmit)}>
<Row>
<Colxx xs="12" lg="8">
<fieldset>
<input
name="url"
type="text"
placeholder="Paste long Url and Shorten it"
{...register('url', {
required: 'Url is Required',
pattern: {
value:
/[(http(s)?):\/\/(www\.)?a-zA-Z0-9@:%._\ ~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\ .~#?&//=]*)/i,
message: 'Please enter a valid Url',
},
})}
/>
<ErrorMessage
errors={errors}
name="url"
render={({ messages }) =>
messages
? Object.entries(messages).map(([type, message]) => (
<p className="error__message" key={type}>
<AiFillWarning style={{ marginTop: '-5px' }} />
<span>{message}</span>
</p>
))
: null
}
/>
</fieldset>
</Colxx>
<Colxx xs="12" lg="4">
<Button size="lg" type="submit">
{' '}
Submit
</Button>
</Colxx>
</Row>
</form>
) : (
<form>
<Row>
<Colxx xxs="12" lg="8">
<fieldset>
<input name="url" type="text" defaultValue={shortUrl} />
</fieldset>
</Colxx>
<Colxx xs="12" lg="4">
<Button size="lg" type="submit">
Copy
</Button>
</Colxx>
</Row>
</form>
)}
</Colxx>
</Row>
</div>
);
}
uj5u.com熱心網友回復：
在這里，您可以使用一個空陣列來存盤縮短的 URL。當您按下縮短 URL 按鈕時，使該輸入欄位的狀態為真，并使用該陣列在該欄位中顯示文本。我在我的 Shortly 網站上實作了相同的功能。您可以訪問它以查看演示很快 我的 GitHub 存盤庫有該網站的完整源代碼。這會對你有很大幫助——我的GitRepo 希望我能夠解決你的疑問......
uj5u.com熱心網友回復：
我已經解決了邏輯。我什至在shortUrl輸入框上放了一個onKeyUp，然后用useState跟蹤按鍵事件。這是代碼 -
const CreateUrl = ({ match }) => {
const [shortUrl, setShortUrl] = useState('');
const [isSubmitted, setIsSubmitted] = useState(false);
const [isKeyPressed, setIsKeyPressed] = useState(false);
const {
register,
handleSubmit,
formState: { errors },
} = useForm({
criteriaMode: 'all',
mode: 'onChange',
});
const onSubmit = (data) => {
console.log(data);
setIsSubmitted(true);
setIsKeyPressed(false);
setShortUrl('https://cutt.ly/wUBnKby');
};
return (
<div className="create__url">
<Row>
<Colxx xxs="12">
<Breadcrumb heading="menu.createUrl" match={match} />
<Separator className="mb-5" />
</Colxx>
</Row>
<Row>
<Colxx xxs="12" mt="4">
{!isSubmitted || isKeyPressed ? (
<form onSubmit={handleSubmit(onSubmit)}>
<Row>
<Colxx xs="12" lg="8">
<fieldset>
<input
name="url"
type="text"
placeholder="Paste long Url and Shorten it"
{...register('url', {
required: 'Url is Required',
pattern: {
value:
/[(http(s)?):\/\/(www\.)?a-zA-Z0-9@:%._\ ~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\ .~#?&//=]*)/i,
message: 'Please enter a valid Url',
},
})}
/>
<ErrorMessage
errors={errors}
name="url"
render={({ messages }) =>
messages
? Object.entries(messages).map(([type, message]) => (
<p className="error__message" key={type}>
<AiFillWarning style={{ marginTop: '-5px' }} />
<span>{message}</span>
</p>
))
: null
}
/>
</fieldset>
</Colxx>
<Colxx xs="12" lg="4">
<Button size="lg" type="submit">
{' '}
Submit
</Button>
</Colxx>
</Row>
</form>
) : (
<form>
<Row>
<Colxx xxs="12" lg="8">
<fieldset>
<input
name="url"
type="text"
value={shortUrl}
onKeyUp={() => setIsKeyPressed(true)}
/>
</fieldset>
</Colxx>
<Colxx xs="12" lg="4">
<Button size="lg" type="submit">
Copy
</Button>
</Colxx>
</Row>
</form>
)}
</Colxx>
</Row>
{/* <Row className="mt-4">
<Colxx xxs="12">
{isSubmitted && (
)}
</Colxx>
</Row> */}
</div>
);
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/419471.html
標籤：
上一篇：如何在增量表上運行sql查詢