React：输入焦点导致放大后触发缩小

Question

由于<input> 获得焦点，在页面被放大后，有一种方法可以在 React 中缩小页面？想象一个简单的组件，如下所示：我想缩小表单提交。

const Component = (props) =>{

 const handleSubmit = (e) => {
   e.preventDefault();
   //Zoom out
 }

 return(
   <form onSubmit={handleSubmit}>
      <input/>
      <button>Sign in</button>
   </form>
 );
}

重要：

我确实不想要禁用放大效果。我发现通过设置视口maximum-scale=1 或将字体大小设置为16px 我可以禁用它[Link here]，但这不是我想要的页面行为。

Answer 1

您可以在您的 handleSubmit() 方法中触发此操作以将缩放重置为 100%：

window.document.body.style.zoom = 1;

请注意，根据 caniuse，这在 Firefox 中不起作用： https://caniuse.com/css-zoom