我需要帮助.我试图根据在react js中的另一个页面中单击的选项来显示按钮的值

Question

例如，如果用户单击50按钮，50应该像这样显示在"/ProceedConfirmation"页面[50]。我试过其他条件等，但都不起作用。此外，当我将我的页面链接到另一个页面时，在重定向到所需页面之前，它会将我带到不同的页面。我还是reactjs的新手，我真的很感激你的帮助。

import React from 'react'
import './SelectAmout.css';
import {Button} from '../Button'
import button from './Withorwithoutcard'

function SelectAmount() {

return (
<div className='select-amount-container'>
<div className = 'cancel-and-text'>
<h3 className = 'amount-text'>Please select amount</h3>
<img src='cancel button.png'
onClick = {() => window.location = '/SelectTransaction'}  
alt='Cancel selection. Go back to previous page'
className='cancel-pic'
/>
</div>
<p className = 'p1'> You can also enter your prefered amount</p>
<p className = 'p2'> All amount are in GH</p>  
{/*<div>{amount}</div>*/}
{/*column 1*/}
<div className = 'select-amount-btns-1'>
<div className = 'amount-btns-list-1'>
{button &&<Button onClick = {() => window.location.href = '/ProceedConfirmation'}
className='amount-btns-list-1'
buttonStyle='secondary--btn'
buttonSize='stylished-medium-btn'   
>
50
</Button>}
</div>
<div className = 'amount-btns-list-2'>
{button && <Button onClick = {() => window.location.href = '/ProceedConfirmation'}
className='amount-btns-list-2'
buttonStyle='secondary--btn'
buttonSize='stylished-medium-btn'>
100
</Button>}
</div>
</div>
{/*column 2*/}
<div className = 'select-amount-btns-2'>
<div className = 'amount-btns-list-1'>
{button && <Button onClick = {() => window.location.href = '/ProceedConfirmation'}
className='amount-btns-list-1'
buttonStyle='secondary--btn'
buttonSize='stylished-medium-btn'>
200
</Button>}
</div>
<div className = 'amount-btns-list-2'>
{button &&<Button onClick = {() => window.location.href = '/ProceedConfirmation'}
className='amount-btns-list-3'
buttonStyle='secondary--btn'
buttonSize='stylished-medium-btn'>
300
</Button>}
</div>
</div>
{/*column 3*/}
<div className = 'select-amount-btns-3'>
<div className = 'amount-btns-list-1'>
{button &&<Button onClick = {() => window.location.href = '/ProceedConfirmation'}
className='amount-btns-list-1'
buttonStyle='secondary--btn'
buttonSize='stylished-medium-btn'>
400
</Button>}
</div>
<div className = 'amount-btns-list-2'>
{button && <Button onClick = {() => window.location.href = '/ProceedConfirmation'}
className='amount-btns-list-2'
buttonStyle='secondary--btn'
buttonSize='stylished-medium-btn'>
500
</Button>}
</div>
</div>
{/*column 4*/}
<div className = 'select-amount-btns-4'>
{button &&<Button onClick = {() => window.location.href = '/'}
className='amount-btns-list-1'
buttonStyle='primary--btn'
buttonSize='large--btn'>
Enter Amount
</Button>}
</div> 
</div>
)

};


export default SelectAmount

import React from 'react';
import {Button} from '../Button';
import button from './Withorwithoutcard';
import './ProceedConfirmation.css';

function ProceedConfirmation() {
let amount;

if (choice1) {
amount = choice1; 
}
else if (choice2){
amount = <div>100</div>
}

return (
<div className = 'proceed-confirmation-container'>
<div className = 'cancel-and-text'>

<img src='cancel button.png'
onClick = {() => window.location = '/SelectAmount'}  
alt='Cancel selection. Go back to previous page'
className='proceed-confirmation-cancel-pic'
/>
</div>
<p>You have requested to withdraw an amount of</p>
<div>[{ amount }]</div>
{/*<div>{amount}</div>*/}

<div className = 'select-amount-btns-4'>
{button && <Button onClick = {() => window.location.href = '/'}
className='amount-btns-list-1'
buttonStyle='primary--btn'
buttonSize='small--btn'>
Enter Amount
</Button>}
</div>
<div className = 'proceed-tips'>
<h4>Tips</h4>
<ul className = 'proceed-tips-lists'>
<li>Please make sure your card is not damagedt</li>
<li>Please make sure you take out your card when you are done with your transaction
</li>
</ul>
</div>
</div>
)
}
export default ProceedConfirmation

Answer 1

使用React Router并定义带有传递参数选项的路由，如下所示。

<Route exact path="/ProceedConfirmation/:amount" component={ProceedConfirmation}/>

在selectAmountComponent中编写一个按钮点击处理程序，如下所示。对每个按钮重复类似的JSX。

function SelectAmount(props)
{
const handleAmountSelected = (amount) => {
props.history.push('/ProceedConfirmation/?value={amount}');
}
return (
....
....
<div className = 'amount-btns-list-2'>
{button &&<Button onClick = {() => 
{handleAmountSelected(300)}}
className='amount-btns-list-3'
buttonStyle='secondary--btn'
buttonSize='stylished-medium-btn'>
300
</Button>}
</div>
...
)

在ProceedConfirmation组件中，您可以从url中获取值作为

props.match.params.value

如果你不想使用React Router，请将处理程序中的行更改为

handleAmountSelected(amount)
{
window.location.href = '/proceedConfirmation/?value={amount}'
}

在处理过程中，Confirmation组件使用QueryString来解析值

import * as qs from 'query-string';
console.log(location.search);
//=> '?value=300'
const parsed = qs.parse(location.search);
console.log(parsed);
//=> {value: 300}