如何从子组件中获取价值?

Posted

技术标签:

【中文标题】如何从子组件中获取价值?【英文标题】:How can get Value from child component in react? 【发布时间】:2019-05-13 12:15:40 【问题描述】:

我创建了一个InputComponent,我想将此组件导入其他组件并提交,但我做不到。如何从 FormComponent 中的子组件中获取价值

InputComponent.js

import React, Component from 'react';

class InputComponent extends Component 
    constructor(props) 
        super(props);
        this.state =  currentVal: null 
    

    render()  
        return ( 
            <div>
                <input  
                    value=this.state.currentVal
                    onChange=(event) => this.setState(currentVal:event.target.value )
                   /> 
            </div>
         );
    


export default InputComponent;

FormComponent.js

import React,Component from 'react';
import InputComponent from '../../components/common/InputComponent';

class FormComponent extends Component 
    constructor(props) 
        super(props);
        this.state =   
    


    CallSubmit= (event) =>   
        // how can get username and password ?

        event.preventDefault();
        console.log(event.target.vale)

    

    render()  
        return ( 

            <div style=width:100, height:500, marginTop:100>
                <form onSubmit=  this.CallSubmit >
                    <InputComponent name="username" />
                    <InputComponent name="password" />

                    <button>Send it</button>
                </form>
            </div>
         );
    


export default FormComponent;

【问题讨论】:

【参考方案1】:

您可以在子组件上创建 onChange 操作,例如这是您的 FormComponent: 创建这个函数来处理变化:

onChangeUsername(username)
 this.setState(username)
 

将 props 传递给子组件:

<InputComponent name="username" onChange = this.onChangeUsername />

并且在子组件(InputComponent)中,你可以访问这个props并将数据传递给它:

this.props.onChange(event.target.value)

【讨论】:

【参考方案2】:

在 React 中,数据以一种方式从父级流向子级。

因此,您需要在FormComponent 处拥有输入的实际状态,并将它们作为道具传递给InputComponent,以及在FormComponent 处处理它的函数。

<div>
  <InputComponent 
    input=this.state.username 
    onChange=this.handleInputChange
  />
  <InputComponent 
    input=this.state.password 
    onChange=this.handleInputChange
  />
</div>

一篇好文章了解一下:https://openclas-s-rooms.com/en/courses/4286486-build-web-apps-with-reactjs/4286721-understand-one-way-data-bindings

【讨论】:

【参考方案3】:

将您的 onChange 函数移到父组件中,并将用户名和密码存储在 FormComponent 组件中

【讨论】:

我不明白,你能给我解释一下吗?

以上是关于如何从子组件中获取价值?的主要内容,如果未能解决你的问题,请参考以下文章

从子组件为 React 上下文添加价值

从子查询中保存价值并在以后重用它?

如何从 Vue js 中另一个 Parent 的 Child 组件中获取价值?

如何在 Angular 的 ng 组件中从 ng-slider 获取价值

在python中获取价值组件? [复制]

从其他组件/架构问题中获取价值?