reactjs - 如何使用 React Hooks 在另一个组件中获取表单的输入值
问题描述
我已经将 Axios 与 Reach Hooks 一起使用。有什么方法可以从 form.js 文件中获取更新的输入值,以便我可以使用它来更新 ApiData.js 文件中的 axios.get 链接?当用户键入一个值时,我想获取该值并在 ApiData.js 文件中使用,以便可以在 axios.get 中更新该值。我已经尝试了很多方法,将 form.js 文件中的 updatedInputVal 传递给一个函数,然后尝试在 ApiData.js 文件中访问它。没有任何效果。我是初学者。因此,如果您不清楚这个问题,请告诉我。提前致谢
这是 form.js 文件
import React, {useState} from 'react';
function UseForm(){
const[inputValue, setInputValue] = useState({
search: "",
contactName:"",
contact:""
})
function handleChange(e){
const {name, value} = e.target;
setInputValue(previousValue=>{
if(name === "search"){
return{
search: value,
contactName:previousValue.contactName,
contact:previousValue.contact
}
}
})
}
function onFormSubmit(event){
let updatedInputVal = setInputValue(inputValue.search)
event.preventDefault();
return updatedInputVal;//Want to fetch this value and use it in the ApiData.js component
}
return (
<div className="form-container">
<div className="input-div">
<form onSubmit={onFormSubmit}>
<input className="form-input" onChange={handleChange} type="text" name="search" value={inputValue.search} placeholder="Search TV Shows"/>
</form>
</div>
<div className="btn-div">
<button type="submit" className="btn">Submit</button>
</div>
</div>)
}
export default UseForm;
这是 ApiData.js 文件
import React, {useState, useEffect} from 'react';
import axios from 'axios';
const FetchApiData = () =>{
const [data, setData] = useState([])
useEffect(()=>{
async function fetchData(){
const resquest = await axios.get(`http://api.tvmaze.com/search/shows?q=${//want to insert here the updated input value the user types}`)
const appData = resquest.data[0].show.image.medium;
setData(appData)
return appData
} fetchData()
}, [])
return (
<div className="section-image">
<img src={data} alt=""/>
</div>
)
}
export default FetchApiData
应用程序.js 文件
import React from 'react';
import Nav from "./Nav";
import UseForm from "./Form"
import FetchApiData from './ApiData'
function App(){
return (
<div>
<Nav
src={`${process.env.PUBLIC_URL}/images/logo.png`}
title = "CONTACT US"
/>
<UseForm/>
<FetchApiData/>
</div>)
}
export default App
解决方案
因为App
组件是两者的父级FetchApiData
,UseForm
您可以简单地使用组件处理此值的状态App
并将此属性传递给两个子级。
App
零件:
function App(){
// declare state object here
const [inputValue, setInputValue] = useState({
search: "",
contactName:"",
contact:""
});
return (
<div>
<Nav
src={`${process.env.PUBLIC_URL}/images/logo.png`}
title = "CONTACT US"
/>
{/* Pass props to each component */}
<UseForm inputValue={inputValue} setInputValue={setInputValue}/>
<FetchApiData inputValue={inputValue}/>
</div>)
}
UseForm
零件:
function UseForm({inputValue, setInputValue}){
// Remove this
// const[inputValue, setInputValue] = useState({
// search: "",
// contactName:"",
// contact:""
// })
// keep everything else the same
}
FetchApiData
零件:
const FetchApiData = ({inputValue}) =>{
const [data, setData] = useState([])
useEffect(()=>{
async function fetchData(){
const resquest = await axios.get(`http://api.tvmaze.com/search/shows?q=${inputValue}`)
const appData = resquest.data[0].show.image.medium;
setData(appData)
return appData
} fetchData()
}, [inputValue])
return (
<div className="section-image">
<img src={data} alt=""/>
</div>
)
}
FetchApiData
每次inputValue
更改都会重新渲染。请注意这一点,除非它是预期的行为。
推荐阅读
- python - 构建使用 Adamchick 系列计算 pi 的逻辑图
- ios - 使用 takePictureAsync 时,如何在 iOS 上更快地上传图像?
- excel - 如何验证是否通过量角器脚本打开了 excel 文件?
- xamarin - 制作 HTTPClient PostAsync 和 GetAsync 的流行方法?
- ios - 我在所有模拟器的屏幕顶部和底部都有一个大黑条
- python - 如何在图中沿第三维绘制矩阵的多行?
- api - IBM IAM API 密钥认证错误
- c++ - 为什么我需要在函数的返回类型之前添加命名空间前缀?
- php - 为什么我的 cURL 请求在 XAMPP 中不起作用?
- symfony - 如何在带有 Proyect Symfony 的 vueJS 中使用路径树枝 - 如何正确使用 FSRouting