Передача суммы от кнопки вниз к компоненту «Оплатить» - PullRequest
Новая
       4

Передача суммы от кнопки вниз к компоненту «Оплатить»

0 голосов
/ 23 февраля 2020

У меня есть кнопка в компоненте, которая содержит сумму в {obj.amount}, я хочу, чтобы эта сумма была передана в параметре PayView «сумма». Поскольку «onPress» в компоненте нижнего колонтитула, он сводит меня к компоненту payview. Как я могу проанализировать сумму там. 

 export default class FooterComponent extends Component {

    constructor(props) {
        super(props);
    }

    render() {
    const {navigate} = this.props.navigation;
    //gas items
    const gas=[{
        title:"4kg",
        icon:"car",
        amount:'800',
    },
    {
        title:"12.5kg",
        icon:"car",
        amount:'4000',
    },
    {
        title:"26kg",
        icon:"car",
        amount:'8000',
    },
    ]
    return(
        <Footer style={{marginBottom:10,height:75}}>
            <FooterTab >
               {
                   gas.map((obj,index)=>{
                       return(
                           <Button key={index}  onPress={() => navigate('Landing')}>
                                <Icon size={37} name={obj.icon} />
                                <Text style={{fontSize:12}}>{obj.title}</Text>
                                <Text>{'\u20A6'}<Text style={{fontSize:13,fontWeight: 'bold',color:'#FFFFF'}}>{obj.amount}</Text></Text>
                            </Button>
                       )
                   })
               }
            </FooterTab>
        </Footer>
    )

}
}

У меня есть этот компонент 

class  Landing  extends  React.Component { 

      render() {
          return (
              <PayView 
              buttonText=  "Pay Now"
              amount={120000}

             />
     );
     }
}
export default Landing;

Затем Landing затем разбирается с Payment, который затем ссылается в StackNavigator 

export default function Payment() {


  return (

    <Landing  />

  );
}

Ответы [ 2 ]

0 голосов
/ 23 февраля 2020

Все, что я понимаю из описания вашей проблемы, заключается в том, что вы хотите иметь возможность * * * * * * * * * * * * * * * * * * * 100 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * '*' * '. общее центральное состояние, к которому могут обращаться все компоненты, которые подписываются на это состояние. Короче говоря, Redux, flux или ContextAPI.

, но если вы не хотите использовать какой-либо из них, вы можете использовать useRef hook. (если вы используете React 16.8 +) или createRef и затем можете получить доступ к состоянию в current свойстве этой ссылки.

проверьте консоль. https://codepen.io/AshifZafar/pen/OJVbKzB?editors=1112

0 голосов
/ 23 февраля 2020

Что вам нужно сделать, это поднять состояние до ближайшего общего компонента.

Создать переменную состояния в общем компоненте, передать функцию до изменить состояние до Кнопка компонента через реквизит, который будет вызывать функцию при изменении суммы. Передайте значение фактическое состояние компоненту PayView.

Поскольку состояние находится в родительском компоненте, при каждом изменении состояния (даже если это дочерний компонент Button), React будет запускать рендеринг дерева компонентов от родительского элемента с обновлением компонентов Button и PayView с новой суммой.

EDIT : 

function Parent() {
  const [amount, setAmount] = useState();
  return (
    <Button onPay={setAmount} />
    <PayView amount={amount} />
  );
}

function Button({ onPay }) {
  return <button onClick={() => onPay(100)}>Pay!</button>;
}

function PayView({ amount }) {
  return (typeof amount === "number") ? (
    <div>Paying {amount}...</div>
  ) : (
    <div>Ready to pay</div>
  );
}
...