从容器调用组件并根据父容器提供的输入参数呈现表单 [英] Calling a component from a container and rendering the form based on Input parameters given from parent container
本文介绍了从容器调用组件并根据父容器提供的输入参数呈现表单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
以下是我的Todo组件代码，我在其中渲染名为Dynamic component的组件
Following is my code for Todo component where i am rendering my component named Dynamic component
import React, { Component } from 'react';
import Dynamiccomponent from '../components/ToDo/Todocomponent';
import Navbar from '../components/Nav/Navbar';
import AxiosInstance from './AxiosInstance';
import Axios from 'axios';
import { prototype } from 'stack-utils';
class container extends Component {
state = {
// how i want my data to look with a heading with date proprtey and a description
Todo: {
heading: { type: "text", value: " ", placeholder: 'plese enter heading', name:"heading"},
date: { type: "date", value: " ", placeholder: "plese enter date", name: "date" },
description: { value: " ", placeholder: 'plese enter description', name: "description"}
},
}
// It will be called after total form is loded
componentDidMount(){
AxiosInstance.get('/todos').then((data) =>{
console.log("these is the data you have entered in db",data);
let dataFromServer = data.data.data.map((data) =>{
console.log(data);
Object.keys(this.state.Todo).map((proptype)=>{
this.setState (prevState => {
prevState.Todo[proptype].value = data[proptype]
})
console.log("we are seeing the updated state",this.state.Todo)
})
})
})
}
onChangeHandler = (event) =>{
// declare some varables
let name = event.target.name;
let value = event.target.value;
let updatedTodo = this.state.Todo[name];
console.log(updatedTodo)
//best logic i have seen
this.setState(prevState =>({
Todo: {...prevState.Todo, [name] : {...updatedTodo, value:value}}
}))
console.log(event.value)
this.setState({
[event.target.name] : event.target.value
})
// this.setState({Todo.heading.value: event.target.value })
}
// we are submiting to the server
onSubmitHandler = (event) =>{
console.log("you have succesfully clicked the handler",this.state.Todo.heading.value)
let todoData = { heading: this.state.Todo.heading.value,
date: this.state.Todo.date.value,
description : this.state.Todo.description.value}
console.log("we are seeing the todo here",todoData);
AxiosInstance.post('/newtodo',todoData).then((res) =>{
console.log(res);
})
}
render() {
var dataPassingHandler = () => {
return (
<div>
<Dynamiccomponent todoprop={this.state.Todo} handleChange={this.onChangeHandler} handleSubmit={this.onSubmitHandler}
handleEdit = {this.editHandler} handledelete={this.deleteHandler}/>
</div>
)
}
return (
<div>
<Navbar/>
{dataPassingHandler()}
</div>
)
}
}
export default container;
以下是我的组件代码，其中我正在检查类型并在卡中显示数据从'react'导入React；
Following is my code for component where i am checking the type and displaying the data in card import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css'
// now created a component
const component = (props) => {
let renderObject = null
let obj;
const renderdata = () =>{
console.log(props);
obj = Object.keys(props.todoprop).map((todoproprties) =>{
console.log("[here we are looking at the data from todo component]" , props.todoprop[todoproprties])
let toDoProprties = props.todoprop[todoproprties]
switch(props.todoprop[todoproprties].type){
case 'text':
return <input type="text" key="1" value={toDoProprties.value} name ={toDoProprties.name} onChange={props.handleChange} placeholder = {toDoProprties.placeholder} className="card-title" style={{dispay: "block"}}/>
case 'date':
return <input type="date" key="2" value={toDoProprties.value} onChange={props.handleChange} name={toDoProprties.name} placeholder = {toDoProprties.placeholder} className="card-text" style={{display:"block" }}/>
default:
return <textarea rows="4" cols="50" key= "3" value={toDoProprties.value} name= {toDoProprties.name} onChange={props.handleChange} placeholder = {toDoProprties.placeholder} className="card-text" style={{ display: "block"}}/>
}
})
}
return (
<div>
<h1>Hello from component </h1>
{renderdata()}
<div className="card w-75">
<div className="card-body">
<h5 className="card-title">To do list</h5>
<div>
{obj}
<br/>
<button type="submit" onClick={props.handleSubmit} className="btn btn-primary">Submit</button>
<button type="submit" onClick={props.handleEdit} className="btn btn-warning">Edit</button>
<button type="submit" onClick={props.handledelete} className="btn btn-danger">Delete</button>
</div>
</div>
</div>
{console.log(props)}
</div>
);
}
export default component;
1)在容器(基于类的组件)中，我已在componentDidMount中使用axios来获取数据，并且我已更改为componentWillMount(但我的代码内部无作用)
1)In the container (class based component ) I have used axios in componentDidMount to get the data and i have changed to componentWillMount (But nothing worked inside my code)
2)首先在componentDidMount中，我获取了数据并对其进行了切片，并使用setSate更改了状态为了构想，我改变了状态
2)In componentDidMount first i got the data and sliced it and changed the state using setSate for conformation i have o/p the changed state
date: {type: "date", value: "2019-09-19", placeholder: "plese enter date", name: "date"}
description: {value: "vrrrrr", placeholder: "plese enter description", name: "description"}
heading: {type: "text", value: "Headinsssssssssssssg", placeholder: "plese enter heading", name: "heading"}
__proto__: Object
我的组件比容器首先渲染(我可以说通过console.log)我的状态改变时不是第二次渲染我不知道为什么
推荐答案
以下问题是由于未正确更改状态并更新状态
The following issue is because of not changing the state properly and updating it
我更改了组件中的以下代码行，现在可以正常工作了
I have changed the following lines of code in component did mount now it worked
componentDidMount(){
AxiosInstance.get('/todos').then((data) =>{
console.log("these is the data you have entered in db",data);
let dataFromServer = data.data.data.map((data) =>{
console.log(data);
Object.keys(this.state.Todo).map((proptype)=>{
console.log("////////////////////", this.state.Todo[proptype].value)
let StateKeyValue = this.state.Todo[proptype].value;
let dynamicValue = data[proptype];
console.log("[we are seeing the dynamic value before entering into the state]" , " ", StateKeyValue );
this.setState(prevState =>({
Todo : {...prevState.Todo, [proptype] : {... dynamicValue, value: dynamicValue } }
}))
})
})
这篇关于从容器调用组件并根据父容器提供的输入参数呈现表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
