Как получить данные из объекта в дочернем компоненте и передать их методу в родительский компонент в React

Question

Я искал везде, но я не нашел пути. Я только нашел, как передать данные от родителя к ребенку в React. Вот почему я задаю этот вопрос. У меня есть родительский компонент, который является формой, и он принимает входные данные от любого пользовательского ввода. Однако есть поле, к которому оно не имеет доступа в родительском компоненте и доступно в методе дочернего компонента. Это поле «priorityLevel» в родительском компоненте, которое я установил в null (просто ожидаю, что дочерний компонент предоставит эту информацию). В дочернем компоненте я собираю эти данные «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);

Answer 1

В TodoForm:

state = {
    priorityLevel: {},
}

и

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

В PrioritySelector:

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