reactjs - 在 React 中单击后鼠标单击并输入键盘禁用

Question

我正在尝试做的事情：我想做到这一点，以便当您用鼠标单击按钮或从键盘输入时，您以后无法再次单击它。换句话说，按一次按钮后将其禁用。

用鼠标第二次点击有效，但我无法让它与 enter 一起工作。

我的代码如下。

function HomeFood() {
    const [food, setFood] = useState(null);
    const [calories, setCalories] = useState('');
    const [disabled, setDisabled] = useState(false);

    async function foodData() {
        const result = await axios.get(`link`);
        console.log('DATA RESULTS:', result.data);
        setFood(result.data)
    }

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

    function handleKeyPress(e) {
        if (e.key === 'Enter') {
            foodData()
        }
    }

    return (
        <div className="container">
            <section className='food'>
                <input
                    type='number'
                    onChange={handleChange}
                    onKeyPress={handleKeyPress}
                />
                <button
                    onClick={() => {
                        foodData();
                        setDisabled(true);
                    }}
                    disabled={disabled}
                >
                    Click here
                </button>
            </section>
            {food && <FoodNutrients mealsData={food}/>}
        </div>
    );
}

我尝试在 onKeyPress 函数中使用禁用状态，但只会出错。我也尝试将它放在 onKeyPress 的输入中，但又出现了更多错误。

标签： reactjsclickentermouseclick-eventdisable

Answer 1

就像onClick, 调用setDisabledin handleKeyPress：

function handleKeyPress(e) {
    if (e.key === 'Enter') {

       if (disabled) { // do nothing if already disabled
           return;
        }

        foodData();
        setDisabled(true);
    }
}