javascript - 如何从子组件中的对象中获取数据并将其传递给 React 中的父组件中的方法
问题描述
我一直在到处寻找,但我没有找到方法。我只发现了如何在 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)
}
推荐阅读
- node.js - 通过 Dockerfile 编译时出现 TSC 错误
- javascript - 为查询字段 Y 返回的类型 X 的对象缺少选择集
- javascript - Microsoft Teams 客户端 SDK 不运行 getContext 回调
- html - 放置在表格中的图像的间距问题 - HTML 和 CSS
- ruby - 如何捕获 Yahoo Groups 消息附件?
- matrix - 为什么 Python 的 Laplacian 方法与 Research Paper 不同?
- r - 在 R 中为日期永久设置特定语言
- angular - 如果将 Angular 模块导出为自定义元素,则为它指定不同的导入
- python - 我在 Mac 中 Visual Studi Code 中的 Python 代码一直运行相同的代码
- sql - 如何通过一个变量从数据库中获取特定列的所有数据?