如何在单个 onChange 中更改值更改和函数调用

Question

这是代码，我想在 city changes.how 的值的同时调用 apifetcher 来做到这一点？？可能吗 city 的值应替换 'q' 值。在那之后，城市和 API 都传递给另一个 file.what 我应该添加还是删除。

import React, { useState } from "react";
import Cities from "./citylist";
import Autocomplete from "@material-ui/lab/Autocomplete";
import TextField from "@material-ui/core/TextField";
import Content from "./content";

const SearchBar = () => {
  const [city, setcity] = useState("");
  const [api, setapi] = useState(
    `http://api.openweathermap.org/data/2.5/forecast?q=Kurunegala,LK& mode=json&appid=5c4420d5c8a61c16e5ee37e4ca265763`
  );
  console.log(city);

  Content(city, api);

  const apiFtecher = () => {
    return setapi(
      `http://api.openweathermap.org/data/2.5/forecast?q=${city},LK&mode=json&appid=5c4420d5c8a61c16e5ee37e4ca265763`
    );
  };

  return (
    <div style={{ width: 300 }}>
      <Autocomplete
        freeSolo
        id="free-solo-2-demo"
        disableClearable
        options={Cities.map((option) => option.name)}
        renderInput={(params) => (
          <TextField
            {...params}
            label="city"
            margin="normal"
            variant="outlined"
            InputProps={{ ...params.InputProps, type: "search" }}
            onChange={(e) => setcity(e.target.value)}
            onBlur={(e) => setcity(e.target.value)}
          />
        )}
      />
    </div>
  );
};

export default SearchBar;

Answer 1

似乎不需要 city 状态变量。

要在每次输入更改时调用 apiFtecher[原文如此]，您需要执行如下操作：

const apiFtecher = e => {
 const city = e.target.value;
 return (
  setapi(`http://api.openweathermap.org/data/2.5/forecast?q=${city},LK&mode=json&appid=5c4420d5c8a61c16e5ee37e4ca265763`)
  );
}

并将元素更新为：

<TextField
        {...params}
        label="city"
        margin="normal"
        variant="outlined"
        InputProps={{ ...params.InputProps, type: 'search' }}
        onChange={apiFtecher}
      />

如何在单个 onChange 中更改值更改和函数调用

How can i change the both value change and function call in a single onChange

javascript

api

state

reactjs

use-state