Question

我正在尝试将基于类的组件转换为函数，但是我不知道如何在不使用set状态的情况下在一个onClick函数中传递2件事。我也不想做4个额外的功能，因为那样会破坏可读性。

我尝试将所有功能集成到一个箭头功能中。

function Calculator() {


const [form, setForm] = useState({
    firstNum: '',
    secondNum: ''
})
const [Sum, setSum] = useState('')
const [isSubmitted, setSubmitted] = useState(false)
const [Operator, setOperator] = useState(null)





function handleOperator() {
    const f = [firstNum]
    const l = [secondNum]
    const Plus = f + l
    const Minus = f - l
    const Multiply = f * l
    const Divide = f / l
    switch (Operator) {
        case 'plus':
            return setSum(Plus), setSubmitted(false)
        case 'minus':
            return setSum(Minus), setSubmitted(false)
        case 'multiply':
            return setSum(Multiply), setSubmitted(false)
        case 'divide':
            return setSum(Divide), setSubmitted(false)
        default:
            return null
    }
}

function handleChange(event) {
    const { name, value, type } = event.target
    if (type === 'text') {
        setForm({
            form,
            [name]: value
        })
    }

}

function handleSubmit(event) {
    event.preventDefault()
    setSubmitted(true)
}


return (
    <div>
        <p>{isSubmitted === true && Sum}</p>
        <button name="Plus" onClick={() => setOperator('plus'), handleOperator}>+</button>
        <button name="Minus" onClick={() => setOperator('minus'), handleOperator}> -</button >
        <button name="Multiply" onClick={() => setOperator('multiply'), handleOperator}>*</button>
        <button name="Divide" onClick={() => setOperator('divide'), handleOperator}>/</button>
        <form onSubmit={handleSubmit}>
            <input name="firstNum" type="text" value={firstNum} onChange={handleChange} />
            <input name="secondNum" type="text" value={secondNum} onChange={handleChange} />
            <br />
            <button> = </button>
        </form>

    </div >
)

}

导出默认计算器

结果应该是您输入第一个和第二个数字，然后单击您的运算符，然后单击等号，它应该会为您提供答案。

Answer 1

您应该能够在嵌入式箭头功能中做两件事：

<button name="Plus" onClick={() => { setOperator('plus'); handleOperator(); }}>+</button>

您只需要为arrow函数赋予主体{...}并调用handleOperator函数即可。

将基于类的组件转换为功能不起作用

1 个答案: