在React中单击鼠标并在单击一次后输入键盘禁用

Question

我想做的是：我想做的是当你用鼠标点击一个按钮或从键盘输入时，你不能再点击它。换句话说，按一次按钮后将其禁用。

第二次用鼠标点击可以，但我不能用回车。

我的代码如下

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 的输入中，但又出现了更多错误。

Answer 1

就像 onClick 一样，在 handleKeyPress 中调用 setDisabled:

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

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

        foodData();
        setDisabled(true);
    }
}

Answer 2

添加第二个禁用状态，即 inputDisabled 并以相同的方式切换它。这允许每个独立于另一个禁用。

function HomeFood() {
  const [food, setFood] = useState(null);
  const [calories, setCalories] = useState('');
  const [disabled, setDisabled] = useState(false);
  const [inputDisabled, setInputDisabled] = useState(false); // <-- new state

  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();
          setInputDisabled(true); // <-- set input disabled
      }
  }

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

如果您希望它们同时被禁用，那么只需对两者使用相同的 disabled 状态和 setter。

在React中单击鼠标并在单击一次后输入键盘禁用

Mouse click and enter keyboard disable after one click in React

enter

click

mouseclick-event

reactjs

disable