javascript - 反应 | 如何将输入中的值插入 API 调用

Question

我有两个文本框，一个用于纬度，一个用于经度。我正在尝试将它们插入到 URL 中，就像我使用 API 密钥所做的那样。

这样做最简单的方法是什么？

async function sendAPIRequest (){
let res = await fetch(`https://api.nasa.gov/planetary/earth/assets?lon=-95.33&lat=29.78&date=2018-01-01&&dim=0.10&api_key=${API_KEY}`);
console.log(res);
let data = await res.json();
console.log(data);
displayData(data);
}



<input id="latID" className="input" type="text" placeholder="Lattitude" />
<input  id="longID" className="input" type="text" placeholder="Longitude" />

标签： javascriptreactjspromiseinterpolation

Answer 1

我会说访问输入的更 React 方式是使用 refs 和useRef钩子，基于类的组件的文档React.createRef

const latRef = useRef();
const longRef = useRef();

async function sendAPIRequest (){
let res = await fetch(`https://api.nasa.gov/planetary/earth/assets?lon=${longRef.current.value}&lat=${latRef.current.value}&date=2018-01-01&&dim=0.10&api_key=${API_KEY}`);
console.log(res);
let data = await res.json();
console.log(data);
displayData(data);
}



<input  id="latID" ref={latRef}  className="input" type="text" placeholder="Lattitude" />
<input  id="longID" ref={longRef} className="input" type="text" placeholder="Longitude" />

第二种选择是在每次更新后添加存储输入值的状态：

const [long, setLong] = useState('');
const [lat, setLat] = useState('');

async function sendAPIRequest (){
let res = await fetch(`https://api.nasa.gov/planetary/earth/assets?lon=${long}&lat=${lat}&date=2018-01-01&&dim=0.10&api_key=${API_KEY}`);
console.log(res);
let data = await res.json();
console.log(data);
displayData(data);
}

<input  id="latID" className="input" type="text" placeholder="Lattitude" onChange={event => setLat(event.target.value)} />
<input  id="longID" className="input" type="text" placeholder="Longitude" onChange={event => setLong(event.target.value)} />