时间戳

首页 > 解决方案 > 反应 onChange 不适用于功能组件内的输入

javascript - 反应 onChange 不适用于功能组件内的输入

问题描述

我已经这样做了一百万次，从来没有遇到过这个问题，我不知道我做错了什么。我有一个简单的输入字段并且有一个钩子useState并且amount我setAmount正在使用handleChange函数来更新它但是handleChange函数没有触发

const CustomAmount = () => {
  const [amount, setAmount] = useState(1);

  const handleChange = (e) => {
    console.log(e); // This is not working either

    setAmount(e.target.value);
  };
  return (
    <div className="custom-amount-container">
      <h4>Enter your desired amount</h4>
      <input
        type="number"
        name="custom-amount"
        data-test="custom-amount-input"
        value={amount}
        onChange={handleChange}
      />
    </div>
  );
};

我尝试将它直接放在onChange道具中，但仍然没有运气，而且通常如果onChange函数不起作用，它不会改变值，但在这种情况下，值会在输入字段内被改变

我也在sweetalert模态中使用这个组件

 const customAmountModal = () => {
    return swal(<CustomAmount />);
  };

标签： javascriptreactjsreact-hookssweetalert

解决方案

这是目前 swal 和 react 17 的一个已知问题： https ://github.com/t4t5/sweetalert/issues/950

作者知道并表示他会尽快推送更新。

请随意投票/观看该问题以获取有关此问题的更新。

推荐阅读