时间戳

首页 > 解决方案 > 当我单击父级上的按钮时，有没有办法获取 React 组件的内部值？

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

问题描述

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

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以便通过回调函数 prop 将每个文本更改冒泡到父级，但这感觉太麻烦了，尤其是当表单有很多字段时。有没有简单或直接的方法来做到这一点？我需要使用像 Redux 这样的全局状态管理工具吗？

标签： javascriptreactjscomponentsstatereact-component

解决方案

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

应用程序.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;

推荐阅读