хотела создать калькулятор в React используя function и Хук но не могла дописать функцию умножения

import React, { useState } from 'react'
export const Calculator2 = () => {
    const [inputValues, setInputValues] = useState({
        input1: 2,
        input2: 2,
    })
    const [result, setResult] = useState()
    const inputHandler = (e) => {
        setInputValues({...inputValues, [e.target.name]: e.target.value })
        console.log(inputValues)
    }
    return (
        <div>
            <h1>Calculate 2</h1>
            <input
                type="number"
                value={inputValues.input1}
                onChange={inputHandler}
                name="input1"
            />
            <button>+</button>
            <button>-</button>
            <button>*</button>
            <button>/</button>
            <input
                type="number"
                value={inputValues.input2}
                onChange={inputHandler}
                name="input2"
            />
            <h1 style={{ textAlign: 'center', width: 420 }}>sum:{ }</h1>
        </div>
    )
}

Ответы (1 шт):

Автор решения: Armen

вешаем слушатель на родителя и по содержимому определяем операцию

import React, { useState } from 'react'

export const Calculator2 = () => {
    const [inputValues, setInputValues] = useState({
        input1: 2,
        input2: 2,
    })
    const [result, setResult] = useState(0)
    const inputHandler = (e) => {
        setInputValues({...inputValues, [e.target.name]: e.target.value })
        console.log(inputValues)
    }

    const handleClick = (e) => {
        switch(e.target.innerHTML){
            case '+':
                setResult(() => +inputValues.input1 + +inputValues.input2)
                break

            case '*':
                setResult(() => inputValues.input1 * inputValues.input2)
                break
            default:
                return
        }
    }
    return (
        <div>
            <h1>Calculate 2</h1>
            <input
                type="number"
                value={inputValues.input1}
                onChange={inputHandler}
                name="input1"
            />
            <div onClick={handleClick}>
                <button>+</button>
                <button>-</button>
                <button>*</button>
                <button>/</button>
            </div>
            <input
                type="number"
                value={inputValues.input2}
                onChange={inputHandler}
                name="input2"
            />
            <h1 style={{ textAlign: 'center', width: 420 }}>sum:{result}</h1>
        </div>
    )
}
→ Ссылка