如何从子组件中的对象中获取数据并将其传递给 React 中父组件中的方法

肯尼曼335

我到处找,但没有找到方法。我只找到了如何在 React 中将数据从父级传递给子级。所以这就是我问这个问题的原因。我有一个父组件,它是一个表单,它从用户输入的任何内容中获取输入。但是有一个字段在父组件中是没有权限访问的,在子组件的方法中可以访问。该字段是我已设置为 null 的父组件中的“priorityLevel”(只是等待子组件提供该信息)。在子组件中,我使用 ref 捕获“priorityLevel”数据并将该数据存储在“handleChange”方法中。它确实注销了选择的信息。但是,我需要将该数据传递给父组件,以便父组件可以看到并使用它。请在下面查看我的代码。

// Parent Component(TodoForm.js)

import React from "react";
import PrioritySelector from "./PrioritySelector";
import { connect } from "react-redux";

class TodoForm extends React.Component {


    /*submit handler to grab input from the input references and store them
    in the "todoData" object. Then dispatches an action type and payload
    capturing the data. Then clears the input*/
    handleSubmit=(e)=> {
        e.preventDefault();
        const todoTitle = this.getTodoTitle.value;
        const description = this.getDescription.value;
        const priorityLevel = null;
        const todoData = {
            id: Math.floor(Math.random()*1000),
            todoTitle,
            description,
            priorityLevel,
            editing: false
        }
        this.props.dispatch({type:"ADD_TODO", todoData })
        this.getTodoTitle.value = "";
        this.getDescription.value = "";
    }


    render() {
        console.log(this.props)
        return(
            <div>
                <form onSubmit={this.handleSubmit}>
                    <input type="text" ref={(input)=> this.getTodoTitle=input} placeholder="Enter Todo" required/>
                    <input type="text" ref={(input)=> this.getDescription=input} placeholder="Enter Description" required/>
                    <PrioritySelector />
                    <button>Add Todo</button>
                </form>
            </div>
        )
    }
}

export default connect()(TodoForm);



// Child Component(PrioritySelector.js)

import React from "react";
import $ from "jquery";
import { connect } from "react-redux";

class PrioritySelector extends React.Component  {

    componentDidMount() {
        $("#selector").show();
    }

    handleSelect =(e)=> {
        const priorityLevel = this.getPriorityLevel.value;
        const priorityLevelData = {
            priorityLevel
        }
        console.log(priorityLevelData)

    }

    render() {
        console.log(this.props)
        return(
            <div>
                <div className="input-field col s12">
                    <select onChange={this.handleSelect} ref={(option)=> this.getPriorityLevel = option} id="selector">
                        <option disabled selected>Choose your option</option>
                        <option value="1">Low</option>
                        <option value="2">Medium</option>
                        <option value="3">High</option>
                    </select>
                </div>
            </div>
        )
    }

}


const mapStateToProps=(state)=> {
    return {
        priorityLevel: state
    }
}


export default connect(mapStateToProps)(PrioritySelector);
特沃蒙

TodoForm

state = {
    priorityLevel: {},
}

<PrioritySelector onSelect={priorityLevel => this.setState({ priorityLevel })} />

PrioritySelector

handleSelect =(e)=> {
    const priorityLevel = this.getPriorityLevel.value;
    const priorityLevelData = {
        priorityLevel
    }
    this.props.onSelect(priorityLevelData)
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

React-在子组件中调用父方法

将道具传递给React.js中的父组件

如何在React的子类组件中调用父方法

有什么方法可以在React中访问父组件实例?

将对象从子对象传递到React中的父组件

React-获取父组件的子组件中存在的引用

将子组件类作为道具传递给React中的父组件

从onClick事件处理程序将参数传递给React中的父组件的正确方法是什么

React中的回调参数如何从子组件传递到父组件?

如何在React Native中从子组件回调到父组件

如何在基于类的组件中创建ref并将其传递给react中的功能组件?

在React中,如何将参数从子组件传递到父组件?

如何使用React Hooks从子组件onClick()触发父组件中的事件?

尝试从子组件React Hooks更改父级中的状态

我如何从对象数组中获取数据,通过API端点将其传递给使用React的所需对象值.fetch()?

在React中访问父组件的方法onClick

如何从子组件获取表单中的数据并将其传递回父组件?

当事件在父组件中触发时,将值从 React 子组件传递给父组件?

在父组件 React 中显示按钮信息

从 api 获取数据并将其传递给 React 中的状态

如何使用 React 中的函数库将数据从子组件传递到二级以上的父组件?

如何从子功能组件更新 React 中的父状态?

如何从子组合组件 React 中获取父道具

如何使用 React Hooks 获取对象数组并将其作为普通文本呈现在组件中?

如何将函数传递给 React 中的父组件?

React - 传递它后在子组件中调用父方法

如何通过 id 检索项目数据并将其传递给 React16 中带有 Hooks 的另一个组件

如何从 React 中的子组件更改父组件中的状态?

React:传递给子组件的状态在父组件中更改时不会更新