如何使用 React Hooks 在另一个组件中获取表单的输入值

Posted 2023-02-22

【中文标题】如何使用 React Hooks 在另一个组件中获取表单的输入值

【英文标题】：How to fetch the input value of a form in another component with React Hooks

【发布时间】：2021-08-01 17:32:53

【问题描述】：

我已将 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 />
            </div>
            ) 


export default FetchApiData

App.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

【参考方案1】：

您需要将inputValue 状态提升为App 组件并通过props 传递它：

function App()
    const [inputValue, setInputValue] = useState(
        search: "",
        contactName:"",
        contact:""
    )
    return (
    <div>
        <Nav 
        src=`$process.env.PUBLIC_URL/images/logo.png`
        title = "CONTACT US"
        />
        <UseForm inputValue=inputValue setInputValue=setInputValue/>
        <FetchApiData inputValue=inputValue/>
    </div>)


function UseForm(inputValue, setInputValue)
 // ...

此外，像Redux 这样的状态管理解决方案还可以帮助管理与组件分开的状态，这样您就不需要像上面显示的那样通过道具传递状态。

【参考方案2】：

因为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 />
            </div>
            ) 

FetchApiData 将在每次 inputValue 更改时重新渲染。请注意这一点，除非它是预期的行为。

【讨论】：

太棒了！很高兴听到它?