当我单击父级上的按钮时，有没有办法获取 React 组件的内部值？

Posted 2023-02-23

【中文标题】当我单击父级上的按钮时，有没有办法获取 React 组件的内部值？

【英文标题】：Is there a way to get a React component's internal values when I click a button on the parent?

【发布时间】：2021-08-12 01:22:47

【问题描述】：

假设我有一个这样的组件 -

const MyForm = ( formId ) => (
   <div>
      <input type="text" placeholder="Full name"></input>
      <input type="text" placeholder="Email"></input>
   </div>
)

export default MyForm;

然后我有我的App.js 就像这样 -

import React from "react";
import MyForm from "./MyForm";

const App = () => (
   <div id="app">
      <MyForm formId="formOne"></MyForm>
      <MyForm formId="formTwo"></MyForm>
      <button onClick=
         () => 
            // Here, when the user clicks the button,
            // I want to get values of both the textboxes,
            // from both the component instances
         
      >Submit</button>
   </div>
)

export default App;

所以基本上，我想要的是 - 当点击 button 时，我希望能够检索文本框的值。一种方法是从MyForm.js 内部引发一个事件，以便通过回调函数道具将每个文本更改冒泡到父级，但这感觉太麻烦了，特别是如果表单有很多字段。有没有简单或直接的方法来做到这一点？我需要使用 Redux 等全局状态管理工具吗？

【问题讨论】：

您可以利用反应上下文并使用MyForm 中的钩子来更新值，您的App 将可以访问数据

【参考方案1】：

组件内的状态仅特定于该组件，组件的父、子或兄弟不知道状态。将值从一个组件传递到另一个组件的唯一方法是通过 props 。在您的情况下，我们需要的是驻留在 App 的状态，然后可以将其作为道具传递给 MyForm 组件。

App.js

const [ formState, setFormState ] = useState( formOne: fullName: '', Email: '', formTwo: '' )

const updateFormValues = (formId, key, value) =>  
   const stateCopy = JSON.parse(JSON.stringify(formState));
   const formToUpdate = stateCopy[formId];
   formToUpdate[key] = value;
   setFormState(stateCopy)


<MyForm formId="formOne" values=formState.formOne updateFormValues=updateFormValues></MyForm>
<MyForm formId="formTwo" values=formState.formTwo updateFormValues=updateFormValues></MyForm>

MyForm.js

const MyForm = ( formId, values, updateFormValues ) => 
     const onInputChange = (e, key) => 
        updateFormValues(formId, key, e.target.value)
     

return(
       <div>
          <input type="text" onChange=(e) => onInputChange(e, 'fullName' value=values.fullName placeholder="Full name"></input>
          <input type="text" onChange=(e) => onInputChange(e, 'email' value=values.email placeholder="Email"></input>
       </div>
    )
    
    export default MyForm;

【参考方案2】：

要访问子组件内的数据，您需要将状态提升到父组件。

One-way data flow

识别基于该状态呈现某些内容的每个组件。 找到一个共同的所有者组件（在层次结构中需要状态的所有组件之上的单个组件）。 共同所有者或层次结构中更高的另一个组件应该拥有该状态。 如果您找不到拥有状态有意义的组件，请创建一个仅用于保存状态的新组件，并将其添加到公共所有者组件上方的层次结构中的某个位置。

一种方法：

import React,  useState  from "react";

function MyForm(props) 
const  handleChange, values  = props;
return (
    <div>
        <label htmlFor="name">Your name</label>
        <input
            type="text"
            placeholder="Full name"
            onChange=handleChange
            value=values.name
            id="name"
            name="name"
        />
        <label htmlFor="email">Your email</label>
        <input
            type="email"
            placeholder="Email"
            onChange=handleChange
            value=values.email
            id="email"
            name="email"
        />
    </div>
        );
    



function App() 
const [values, setValues] = useState( name: "", email: "" );

const handleChange = (event) => 
    const updatedForm =  ...values, [event.target.name]: event.target.value ;
    setValues(updatedForm);
;

return (
    <div id="app">
        <MyForm
            formId="formOne"
            values=values
            handleChange=handleChange
        ></MyForm>

        <button
            onClick=() => 
                console.log(values);
            
        >
            Submit
        </button>
    </div>
);


export default App;