时间戳

首页 > 解决方案 > 在输入字段 React 中键入一个字符后，文本输入变得不集中？

reactjs - 在输入字段 React 中键入一个字符后，文本输入变得不集中？

问题描述

我是新手，对我的反应如此赤裸裸，在即将到来的代码中，每次我尝试在输入字段中输入内容时，我只输入一个字母，然后自动发生unfoucs我已经在网上做了一些研究，但我找到了解决方案不符合我的情况！！！

import styled from "@emotion/styled";
import React, { useState } from "react";

import "./App.css";
import WeatherCard from "./components/WeatherCard/component";

function App() {
  const [city, setCity] = useState("Sydney,AU");
  const [temp, setTemp] = useState("");
  const [condition, setCondition] = useState("");
  const [country, setCountry] = useState("");

  const data = async () => {
    const apiRes = await fetch(
      `
      https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&APPID=fc3c4a92fca29f784461262f448883f4
      `
    );
    const resJSON = await apiRes.json();
    return resJSON;
  };

  const Frame = styled.div`
    padding-top: 10px;
    margin: 0 auto;
    color: whitesmoke;
    display: flex;
    flex-direction: row;
  `;

  const handleSearch = (e) => {
    e.preventDefault();
    data().then((res) => {
      console.log("the weather feels like" + res.main.feels_like);
      console.log("the temp is " + res.main.temp);
      setTemp(res.main.temp);
    });
  };
  return (
    <Frame>
      <WeatherCard temp={temp} condition="Clear" city="Sydney" country="AU" />
      <form>
        <input value={city} onChange={(e) => setCity(e.target.value)} />
        <button onClick={(e) => handleSearch(e)}>Search</button>
      </form>
    </Frame>
  );
}

export default App;

标签： reactjs

解决方案

所以我发现了问题，它在这部分代码中：

  const Frame = styled.div`
    padding-top: 10px;
    margin: 0 auto;
    color: whitesmoke;
    display: flex;
    flex-direction: row;
  `;

我所要做的就是从这个文件中删除样式，然后我在app.css中添加了样式，然后我将Frame标签转换为带有 frame 的 className 的div标签，所以基本上问题出在样式的方式上零件。

推荐阅读