如何使用 React 钩子对两个输入求和？答案

【问题标题】：how to sum two inputs with React hooks?如何使用 React 钩子对两个输入求和？
【发布时间】：2021-01-16 10:37:58
【问题描述】：

我正在尝试对两个输入求和并使用按钮给出结果，我已经定义了状态挂钩并且它们可以工作，但我不知道如何将当前状态传递给函数并对其求和。你能帮我么？我是初学者这是我的代码：


import React from 'react';


export default function Suma (){
    //hook defined
    const [input, setInput] = React.useState({
        num1: "",
        num2: "",
    });

    //handle input change 

    const handleInput = function(e){
        setInput({
            ...input, 
            [e.target.name]: e.target.value
        });
    };

    //suma function

    const suma = function(){
     
    }

    return (
        <div>
            <input onChange={handleInput} name="num1" value={input.num1} type="text"></input>
            <input onChange={handleInput} name="num2" value={input.num2} type="text"></input>
            <button>+</button>
            <span>resultado</span>
        </div>
    )
};

【问题讨论】：

标签： javascript reactjs react-hooks

【解决方案1】：

如果你只想在点击时显示结果，我认为这应该足够了

export default function Suma (){
    //hook defined
    const [input, setInput] = React.useState({
        num1: "",
        num2: "",
    });

    const [result, setResult] = React.useState("")

    //handle input change 

    const handleInput = function(e){
        setInput({
            ...input, 
            [e.target.name]: e.target.value
        });
    };

    //suma function

    const suma = function(){
        const { num1, num2 } = input;
        setResult(Number(num1) + Number(num2));
    }

    return (
        <div>
            <input onChange={handleInput} name="num1" value={input.num1} type="number"></input>
            <input onChange={handleInput} name="num2" value={input.num2} type="number"></input>
            <button onclick={suma}>+</button>
            <span>resultado: {result}</span>
        </div>
    )
};

【讨论】：

【解决方案2】：

import React from 'react';


export default function Suma (){
    //hook defined
    const [input, setInput] = React.useState({
        num1: "",
        num2: "",
    });
    const [sum, setSum] = React.useState(undefined)

    useEffect(() => {
       setSum(parseInt(input.num1) + parseInt(input.num2))
    }, [input])

    //handle input change 

    const handleInput = function(e){
        setInput({
            ...input, 
            [e.target.name]: e.target.value
        });
    };

    return (
        <div>
            <input onChange={handleInput} name="num1" value={input.num1} type="text"></input>
            <input onChange={handleInput} name="num2" value={input.num2} type="text"></input>
            <button>+</button>
            {sum !== undefined && <span>{sum}</span>}
        </div>
    )
};

【讨论】：

您可以使用useMemo 挂钩将值返回给一个常量，而不必使用useEffect 和useState，即const result = useMemo(() => (parseInt(input.num1) + parseInt(input.num2)), [input])

【解决方案3】：

function AddForm() {
  const [sum, setSum] = useState(0);
  const [num, setNum] = useState(0);

  function handleChange(e) {
    setNum(e.target.value);
  }

  function handleSubmit(e) {
    setSum(sum + Number(num));
    e.preventDefault();
  }

  return <form onSubmit={handleSubmit}>
  <input type="number" value={num} onChange={handleChange} />
  <input type="submit" value="Add" />
  <p> Sum is {sum} </p>
  </form>;
}

【讨论】：