如何总和，使用onChange事件划分多个输入的值| Reactjs

Question

我尝试使我的第一个应用程序在React中，一切都起作用，但是我尝试拿走账单和人数的Amoun，并为人分开账单，然后加上小费。我知道某人可能是5分钟的解决方案，但昨天我开始使用该解决方案，但仍然找不到解决方案。

如果有人选择提示，我想拿账单金额，然后按Personamount +小费除以。我做错了

import React, { useState } from 'react'
import style from './BillSplitter.module.css'

const tips = [5, 10, 15, 25]



const Input = ({ label, id, handleChange, name, type, placeholder }) => (
  <>
    <label className={`${style.label}`} htmlFor={id}>{label}</label>
    <input className={`${style.input}`} type={type || "number"} id={id} name={name || id} placeholder={placeholder} onChange={handleChange}></input>
    <br />
  </>
);

const SelectTip = ({ tip }) => {
  <>
    <button className='tipButton' value={tip}></button>
  </>
}

function BillSplitter() {
  const [tipAmount, setTipAmount] = useState(0)
  const [billAmount, setBillAmount] = useState(0)
  const [personAmount, setPersonAmount] = useState(0)


  function handleChange(e) {
    console.log(e.target.value)
  }



  return (
    <div className={`${style.wrapper}`}>
      <div className={`${style.box}`}>
        <div className={`${style.top}`}>
          <h2 className={`${style.title}`}>Bill Splitter</h2>
          <p className={`${style.personBillAmount}`}>Person Bill Amount</p>
          <p onChange={handleChange} className={`${style.totalPersonAmount}`} >$ {tipAmount}</p>
        </div>
        <div className={`${style.bottom}`}>

          <Input handleChange={handleChange} className={`${style.clases}`} placeholder='Amount of bill' label="Bill value">{billAmount}</Input>

          <Input handleChange={handleChange} className={`${style.clases}`} placeholder='Number of people' label="Number of people">{personAmount}</Input>

          <div className={`${style.tipBox}`}>
            <p>Select tip</p>
            {tips.map((tip) => {
              return <button className={`${style.tipButton}`}>{tip} %</button>
            })}
          </div>
        </div>
      </div>
    </div>


  )
}


export default BillSplitter

Answer 1

添加onChange处理程序到输入组件并传递不同的输入设置器函数。然后选择尖端时进行计算。

尝试下面的尝试：

const tips = [5, 10, 15, 25];

const Input = ({ label, id, handleChange, name, type, placeholder }) => (
  <React.Fragment>
    <label htmlFor={id}>{label}</label>
    <input
      type={type || "number"}
      id={id}
      name={name || id}
      placeholder={placeholder}
      onChange={(e) => handleChange(e.target.value)}
    ></input>
    <br />
  </React.Fragment>
);

function BillSplitter() {
  const [billAmount, setBillAmount] = React.useState(0);
  const [personAmount, setPersonAmount] = React.useState(0);
  const [perCost, setPerCost] = React.useState(0);

  const calculatePerPeronAmount = (tip) => {
    if (personAmount > 0) {
      setPerCost(((1 + 0.01 * tip) * billAmount) / personAmount);
    }
  };

  return (
    <div>
      <div>
        <div>
          <h2>Bill Splitter</h2>
          <p>Person Bill Amount</p>
          <p>$ {perCost}</p>
        </div>
        <div>
          <Input
            handleChange={setBillAmount}
            placeholder="Amount of bill"
            label="Bill value"
          >
            {billAmount}
          </Input>

          <Input
            handleChange={setPersonAmount}
            placeholder="Number of people"
            label="Number of people"
          >
            {personAmount}
          </Input>

          <div>
            <p>Select tip</p>
            {tips.map((tip) => {
              return (
                <button onClick={() => calculatePerPeronAmount(tip)} key={tip}>
                  {tip} %
                </button>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
}

ReactDOM.render(<BillSplitter />, document.querySelector('.react'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>