React 应用程序-单击按钮时如何显示价格？

Question

我刚开始学习 React，但遇到了问题。我希望价格 (cena) 仅在单击“Oblicz”按钮时出现。

这是显示价格的组件。

function CalculatorPrice(props) {

const currentPrice = props.price;

return (
    <div className='calculator__price'>
        <CalculatorBtn />
        <div className='calculator__price__box'>
            <h3 className='calculator__price__title'>Cena</h3>
            <p className='calculator__price__text'>{isNaN(currentPrice) ? <span></span> : <span>{currentPrice}</span>} zł</p>
        </div>
    </div>
);

}

这是按钮组件。

function CalculatorBtn() {

return (
    <div>
        <button className='calculateBtn'>Oblicz</button>
    </div>
);

}

Answer 1

您可以通过将状态和一个函数传递给您的按钮组件来实现该状态，该按钮组件跟踪何时显示价格：

function CalculatorPrice(props) {
  const currentPrice = props.price;

  const [showPrice, setShowPrice] = useState(false);

  const handleClick = () => {
    setShowPrice(true);
  }

  return (
      <div className='calculator__price'>
          <CalculatorBtn showPrice={showPrice} handleClick={handleClick} />
          <div className='calculator__price__box'>
              <h3 className='calculator__price__title'>Cena</h3>
              <p className='calculator__price__text'>
                <span>{((isNaN(currentPrice) || !showPrice) ? '' : currentPrice) + zł}</span>
              </p>
          </div>
      </div>
  );
}

按钮：

function CalculatorBtn(props) {
  const handleClick = props.handleClick;

  return (
      <div>
          <button className='calculateBtn' onClick={handleClick}>Oblicz</button>
      </div>
  );
}

您需要添加另一个 way/button 来重置您的价格（如果需要）

React 应用程序-单击按钮时如何显示价格？

React app - How to show the price when the button is clicked?

onclick

reactjs