如何在 React.js 中获取每个项目的值

Question

const [state, setState] = useState("");
<input onChange={e=>setState(e.target.value)}

我知道我可以使用 onChange={} 来获取每个值，但我想获取 （衬衫 x 裤子 x 鞋子）当按钮 onClick={} 事件发生时

function Somethingie() {
   return (
      <div>
         Shirts: <input className="one" type="number"></input>
         Pants: <input className="two" type="number"></input>
         Shoes: <input className="three" type="number"></input>
         <br /> <br />
         <button
            onClick={() => {
               console.log(
                  document.querySelector(".one").value *
                     document.querySelector(".two").value *
                     document.querySelector(".three").value
               );
            }}
         >
            Calculate!
         </button>
         <br /> <br />
         Amount of Possible Outfits: <h1 className="result"></h1>
      </div>
   );
}
ReactDOM.render(
   <Somethingie />, 
   document.getElementById("root")
);

还是创建一个异步函数？

Answer 1

我会为每个输入创建一个状态，将各个输入的值设置为这个状态，为每个输入设置onChange的状态，最后，在按钮的onClick中将三个状态组合起来。

示例输入：

const [state1, setState1] = useState("")
...
const change1 = (e) => {
   setState1(e.target.value);
}
...
<input className="one" type="number" value={state1} onChange={change1}/>

点击按钮

const handleClick = () => {
   result = state1 * state2 * state3;
}

Answer 2

    function Somethingie() {
        return (
               <div>
              Shirts: <input className="one" type="number"></input>
              Pants: <input className="two" type="number"></input>
              Shoes: <input className="three" type="number"></input>
              <br /> <br />
              <button
                 onClick={() => {
                      let x = document.getElementsByClassName('result');
                      x[0].innerHTML =
                      document.querySelector('.one').value *
                      document.querySelector('.two').value *
                      document.querySelector('.three').value;
                         }}
            >
                 Calculate!
            </button>
            <br /> <br />
           Amount of Possible Outfits: <h1 className="result"></h1>
           </div>
         );}

   ReactDOM.render(
   <Somethingie />, 
   document.getElementById("root")
   );

如上代码sn-p所示，可以直接放置计算值。

Answer 3

您需要像这样将每个数据保存在自己的 useState 中：

import { useState } from "react";

const Combinations = () => {
  const [shirts, setShirts] = useState(0);
  const [pants, setPants] = useState(0);
  const [shoes, setShoes] = useState(0);
  const [total, setTotal] = useState(0);

  const onChange = (e) => {
    console.log(e);
    console.log(typeof e.target.value);
    console.log(Number(e.target.value));

    if (e.target.name === "shirts") setShirts(Number(e.target.value));
    if (e.target.name === "pants") setPants(Number(e.target.value));
    if (e.target.name === "shoes") setShoes(Number(e.target.value));
  };

  const calculate = () => {
    let all = null;

    if (shirts !== 0) {
      if (all === null) {
        all = shirts;
      } else {
        all *= shirts;
      }
    }
    if (pants !== 0) {
      if (all === null) {
        all = pants;
      } else {
        all *= pants;
      }
    }
    if (shoes !== 0) {
      if (all === null) {
        all = shoes;
      } else {
        all *= shoes;
      }
    }

    setTotal(all);
  };

  return (
    <div>
      <label htmlFor="shirts">Shirts: </label>
      <input
        type="number"
        id="shirts"
        name="shirts"
        value={shirts}
        onChange={onChange}
      />
      <br />
      <label htmlFor="pants">Pants: </label>
      <input
        type="number"
        id="pants"
        name="pants"
        value={pants}
        onChange={onChange}
      />
      <br />
      <label htmlFor="shoes">Shoes: </label>
      <input
        type="number"
        id="shoes"
        name="shoes"
        value={shoes}
        onChange={onChange}
      />
      <br />
      <button onClick={calculate}>Calculate!</button>
      <br />
      <p>Amount of Possible Outfits: {total}</p>
    </div>
  );
}