хотела создать калькулятор в 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>
)
}