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

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 状态和设置器。