I'm using React and Nextjs, and I was having issues with my contact button. I want it so when someone clicks on my button, it should open up their mail with my email prefilled (pretty much the mailto functionality).
<Button onClick = {(href) => href - "mailto:email#yahoo.com"}> Email </Button>
I can't seem to figure out why it won't work, on click the button doesn't do anything.
As said in the comments, you could achieve the same thing with a tag. Even though it is already answered, I want to share my answer too, hope it helps others.
You can achieve the same result with a button too. In order to do that you will have to call useRouter hook from nextjs and then redirect user once they click on the button like so:
import { useRouter } from 'next/router'
export default function Page() {
const router = useRouter()
return (
<button type="button" onClick={() => router.push('mailto:email#yahoo.com')}>
Click me
</button>
)
}
Related
My goal is to create a page for a specific user homepage with buttons to direct them to their accessible pages. I am in the testing phase right now and I want to use alerts to see if the button will react to being clicked on. However, as being new to React, I am having trouble have multiple buttons return an alert message in my browser. This is what I have so far.
// Here will be the mentor page with a decent layout and buttons to future pages.
import React from 'react';
import '../Mentor/Button.css'
import { useNavigate } from "react-router-dom";
function Mentor() {
function sayHello() {
alert('Hello');
}
function createQuiz(){
alert('You clicked me to create a quiz!');
}
return (
<div>
<button onClick={sayHello}>
Click me!
</button>
<button onCLick={createQuiz}>
Create Quiz
</button>
</div>
);
}
export default Mentor;
For not to get any errors, I added but it will only give me a message from sayHello and not from createQuiz. And the navigate import is something I am planning on using later when problem is fixed.
Assuming you copy pasted your code here, it looks like you simply misspelled the second onClick ! You wrote onCLick instead of onClick.
According to the Lightning Web Component documentation, https://developer.salesforce.com/docs/component-library/bundle/lightning-record-edit-form/documentation, you should be able to create an onsubmit event and prevent the form from being submitted.
This does not appear to work. Here is a simple component to reproduce the issue.
<template>
<lightning-record-edit-form object-api-name="Account" onsubmit={handleSubmit}>
<lightning-input-field field-name="Name" value={value}> </lightning-input-field>
</lightning-record-edit-form>
</template>
import { LightningElement } from 'lwc';
export default class FormSubmit extends LightningElement {
value = 'Put cursor here, hit enter';
handleSubmit(event) {
event.preventDefault();
console.log('This is not happening!!!');
return false;
}
}
Place your cursor in the field and hit the enter key. The page will refresh, and the handleSubmit function is never invoked.
I feel like I am going crazy here...is this a bug? Is the documentation wrong? Did I miss something obvious? Please help!!!
Here is the fix, make sure the form contains a button! That's it!
<template>
<lightning-record-edit-form object-api-name="Account" onsubmit={handleSubmit}>
<lightning-input-field field-name="Name" value={value}> </lightning-input-field>
<lightning-button variant="brand" type="submit" label="Save"> </lightning-button>
</lightning-record-edit-form>
</template>
Of course, after spending hours upon hours debugging this issue I find the solution 30 minutes after posting this question.
The reason I didn't have a button was that I am using this form for inline edit functionality, and there is no need for a button as I am handling the save separately without the need for the user to click submit. I can simply hide the button with some CSS.
I am trying to change my URL after a modal is clicked.
I had added an extra onClick to the button which called the modal, this was to a function - in that function I added some console logging. I could see the logging, but the URL didn't change.
The (original) button code is:
<button className='buttonCheck' onClick={checkAnswer}>CHECK MY ANSWER</button> <CheckAnswerModal showModal={showCongratsModal} onClose={() => setShowCongratsModal(false)} videoMessage={showCongratsURL} content={showWindowContent} size='med'/>
And the modal
import Button from 'react-bootstrap/Button';
import Modal from 'react-bootstrap/Modal';
function CheckAnswerModal({showModal = false, onClose = () =>{}, videoMessage, content, size}) {
return (
<Modal
size={size}
show={showModal}
onHide={onClose}
backdrop="static"
keyboard={false}
>
<Modal.Body>
{videoMessage ? <video src={videoMessage} controls autoPlay> </video>: <div><center>{content}</center></div>}
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={onClose}>
Close
</Button>
</Modal.Footer>
</Modal>
)
}
export default CheckAnswerModal
Originally, I had added a new function to the calling page:
function GoHome() {
console.log("redirecting")
<Redirect to='/' />
}
and added this to the button onClick, I could see the logging, but no URL changing. I've done a bit of looking about and I am pretty sure this is not working as the modal is on screen. To get around this, in the GoHome() I even added a conditional (if the showModal is false, then do the logging)
I've seen some posts which talked about unmounting the component (now - this is something new to me, especially as I don't call any mount component explicitly.)
Am I missing something fundamental with redirect? Or can someone point me at what I am doing wrong (the redirect feels a little "hacky" just now, I need to redo a whole component I think, but this would work for now)
You have to install react-router-dom if you have not installed yet.
Then import it.
import {useNavigate} from react-router-dom
then call it inside a function like:
const navigate = useNavigate()
then in your onClose() function use navigate like:
navigate("/")
sorry for my English
Rather than trying to be smart, I simply declared history at the start and then in my onClose added history.push and it worked.
I have a question regrading to react. I have a IconButton (Material UI) I want to click this button and it will redirect to the specific help page.
For example:
local:3000/education. When I clicked button it will redirect something like local:3000/education/support page.
local:3000/data. It redirect to something like data/support page.
...etc more pages
I am stuck, I am not sure how to implement the button onClick function to redirect to the right support page. I am thinking using react-router, I have did some research we can use 'params' and 'history' parameters from the props? Thank you
Please give me some good advice and right direction thank you.
import { useLocation, useHistory } from "react-router-dom";
export default function App() {
const history = useHistory();
const { pathname } = useLocation();
return (
<div className="App">
<button onClick={() => history.push(`${pathname}/support`)}>
support page
</button>
</div>
);
}
localhost:3000/education.
If you use history.push("/support"), It redirects to localhost:3000/support.
But If you use history.push("support"), It redirects to localhost:3000/education/support
https://reactrouter.com/web/api/Hooks
I'm using MemoryRouter and I don't want the browser to show the full link (in the bottom left corner) when hovering over Link.
<Link to="/somepath" />
Using a function in the to property didn't seem to work.
I know it wraps an <a> tag inside but it still uses href even when passed a function in to.
Any way to implement this?
If you don't want to show the link onHover, consider making the page change programatically with onClick instead of using a Link, as they appear as a normal a tag with it's own href attribute, exposing the URL.
Here's a snippet from the docs
import { useHistory } from "react-router-dom";
function HomeButton() {
let history = useHistory();
function handleClick() {
history.push("/home");
}
return (
<button type="button" onClick={handleClick}>
Go home
</button>
);
}