How to get all input values by click to count and multiply them all? Without useref, just somehow add result of all event.target.values to quantity?

const [quantity, setQuantity] = useState(0);

function handleChange(event) {
  setQuantity(event.target.value);
}
function countCups() {
  setQuantity(hours * l * degrees * capacity);
}
return(
  <>
    <input type="number" placeholder="hours" onChange={handleChange}/>
    <input type="number" placeholder="l" onChange={handleChange}/>
    <input type="number" placeholder="degrees" onChange={handleChange}/>
    <input type="number" placeholder="capacity" onChange={handleChange}/>
    <button id="countButton" onClick={count}>COUNT</button>
    <span>{quantity}</span>
  </>
);

CodePudding user response：

Currently whenever you change an input value it's replacing the existing value in state. Ideally you want to store each input state separately. Now you can do that with separate states or you can use an object as in the example below. You can destructure the input name and value from the event.target (i.e. the changed element), and use those values to update the each object key/value.

When you want to calculate the total quantity that doesn't necessarily need to be stored in state. You can call a function that multiplies the object values together, and use the returned value in the JSX.

const { Fragment, useState } = React;

function Example() {

  // Initialise the inputs state with an object
  const [inputs, setInputs] = useState({});

  // Destructure the name and value from the
  // changed element, and then use those to update
  // the state
  function handleChange(event) {
    const { name, value } = event.target;
    setInputs(prev => {
      return { ...prev, [name]: Number(value) };
    });
  }

  // Returns a value by multiplying all the state
  // values together
  function getQuantity() {
    let quantity = 1;
    for (const key in inputs) {
      const val = inputs[key];
      if (val) quantity *= val;
    }
    return quantity > 1 ? quantity : null;
  }
  
  // Each input now has a name attribute
  // and is "controlled" by including the value
  // from the state
  return (
    <Fragment>
      <input
        type="number"
        name="hours"
        placeholder="hours"
        value={inputs.hours || ''}
        onChange={handleChange}
      />
      <input
        type="number"
        name="l"
        placeholder="l"
        value={inputs.l || ''}
        onChange={handleChange}
      />
      <input
        type="number"
        name="degrees"
        placeholder="degrees"
        value={inputs.degrees || ''}
        onChange={handleChange}
      />
      <input
        type="number"
        name="capacity"
        placeholder="capacity"
        value={inputs.capacity || ''}
        onChange={handleChange}
      />
      <div>Quantity: {getQuantity()}</div>
    </Fragment>
  );
}

ReactDOM.render(
  <Example />,
  document.getElementById('react')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>

CodePudding user response：

You can do this by adding a name to your inputs which you can use as a key in a state object to save your input states

const [state, setState] = useState({});
const [quantity, setQuantity] = useState(0);

function handleChange(event) {
  const name = event.target.name;
  const value = event.target.value;
  setState((prevState) => {
    return {
      ...prevState,
      [name]: value,
    };
  });
}

function countCups() {
  setQuantity(state.hours * state.l * state.degrees * state.capacity);
}

return (
  <>
    <input
      type="number"
      name="hours"
      placeholder="hours"
      value={state.hours ?? ""}
      onChange={handleChange}
    />
    <input
      type="number"
      name="l"
      placeholder="l"
      value={state.l ?? ""}
      onChange={handleChange}
    />
    <input
      type="number"
      name="degrees"
      placeholder="degrees"
      value={state.degrees ?? ""}
      onChange={handleChange}
    />
    <input
      type="number"
      name="capacity"
      placeholder="capacity"
      value={state.capacity ?? ""}
      onChange={handleChange}
    />
    <button id="countButton" onClick={count}>
      COUNT
    </button>
    <span>{quantity}</span>
  </>
);