英文:
React Bootstrap Button
问题
Sure, here's the translation of the code part you provided:
<div className='phone-no'>
<Link className='link-phone-no' to='tel:+12-345-678-89089'>
+12-345-678-89089
</Link>
</div>
英文:
Can anyone tell me how to add telephone number to the react bootstrap buttons, when clicking should call that number.
I have used div tags and link to make it look like a button. what I want to do is to make the button work the in the same way as anchor tag
code :
<div className='phone-no'>
<Link className='link-phone-no' to='tel:+12-345-678-89089'>
+12-345-678-89089
</Link>
</div>
答案1
得分: 1
以下是翻译好的部分：
"如我所见，import {Button} from 'bootstrap_path'; 然后将其与一个绑定了路径的onclick事件监听器一起使用，该事件将调用该函数。您可以使用useref钩子来获取所需的值。
<Button onclick={function_name} ref={myref}>一些文本{number}</Button>"
英文:
As I can see that import {Button} from 'bootstrap_path'; And then use it having path binded with an onclick event listener that will call the function.
You may use useref hook to get the desired values with it.
<Button onclick={function_name} ref={myref}>some text{number}</Button>
答案2
得分: 0
[![为按钮添加电话号码链接][1]][1]
[1]: https://i.stack.imgur.com/4XeHN.png
这个方法可以使按钮作为链接组件，点击后可以跳转到输入的联系电话。第一组按钮代码适用于mui v5，第二组代码适用于react-bootstrap
首先导入这些组件：
import { Button } from 'react-bootstrap';
import { Button } from '@mui/material';
import { Link } from 'react-router-dom';
导入 BrowserRouter 组件到 index.js 文件：
```````````````````````````
<BrowserRouter>
<App />
</BrowserRouter>
```````````````````````````
mui:
``````````````````````````````
<Button
component={Link}
to="tel:+91-97875-97431"
variant="contained"
size="medium"
>
+91-97875-97431
</Button>
````````````````````````````````````
react-bootstrap:
```````````````````````````````````````
<Button
as={Link}
to="tel:+91-97875-97431"
variant="contained"
color="success"
size="large"
>
+91-97875-97431
</Button>
```
<details>
<summary>英文:</summary>
[![Adding Link to Button with phone number][1]][1]
[1]: https://i.stack.imgur.com/4XeHN.png
This method can make the button acts as a link component with clicking can go to a contact no we entered. The first set of button code is for mui v5 and second set of code is for react-bootstrap
import these components first:
``````````````````````````````````````````````````````````````
import { Button } from 'react-bootstrap';
import { Button } from '@mui/material';
import { Link } from 'react-router-dom';
```````````````````````````````````````````````````````````````
import {BrowserRouter} from "react-router-dom"; --- index.js file
before calling App component add BrowserRouter component
````````````````````````````
<BrowserRouter>
<App />
</BrowserRouter>
`````````````````````````````
mui:
``````````````````````````````
<Button
component={Link}
to="tel:+91-97875-97431"
variant="contained"
size="medium"
>
+91-97875-97431
</Button>
``````````````````````````````````````
react-bootstrap:
```````````````````````````````````````
<Button
as={Link}
to="tel:+91-97875-97431"
variant="contained"
color="success"
size="large"
>
+91-97875-97431
</Button>
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论