Reactjs 在react中动态呈现窗体

我已经编写了基于函数的组件，我正在检查开关盒中的类型，这取决于我在这里创建表单的类型

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" , 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} />
                 case 'date':
                     return  <input type="date" key="2" value={toDoProprties.value}  onChange={props.handleChange}/>
                 default:
                    return <textarea rows="10" key="3" cols="30"  rows="10" cols="30"   value={toDoProprties.value} onChange={props.handleChange}/>

             }

        })
    }


    return (
        <div>
            <h1>Hello from component </h1>
            {renderdata()}
            <div className="card">
             <div className="card-body">
              <div>
              {obj}
              <button type="submit" onClick={props.handleSubmit}>Submit</button>
              </div>
             </div>
             </div>
            {console.log(props)}

        </div>
    );

    }
export default component;

const组件=（道具）=>{
设renderObject=null
让obj；
常量渲染数据=（）=>{
控制台日志（道具）；
obj=Object.keys（props.todorop.map）（（todopropries）=>{
log（“我们在这里查看数据”，props.todorop[todoropries]）
让todopropries=props.todorop[todopropries]
开关（props.todoprop[TODOPROPRITES].type）{
案例“文本”：
返回
案例“日期”：
返回
违约：
返回
}
})
}
返回(
来自组件的您好
{renderdata（）}
{obj}
提交
{console.log（props）}
);
}
导出默认组件；

下面是我在其中渲染组件的容器

class container extends Component {
    state = {
        // how i want my data to look  with  a heading with date proprtey and a description
        heading: '',
        date: '',
        description: '', 
        Todo: {
            heading: { type: "text", value: "", placeholder: 'plese enter heading', name:"heading"},
            date: { type: "date", value: "", placeholder: "plese enter date", name: "date" },
            description: {  value: "PLESE DESIGN A GOOD TODO",  placeholder: 'plese enter description',  name: "description"}
        }
    }

    onChangeHandler = (event) =>{
        console.log(event.value)
        this.setState({
            [event.target.name] : event.target.value
        })
        // this.setState({Todo.heading.value: event.target.value })
    }

    onSubmitHandler = () =>{

        console.log("you have succesfully clicked the handler")
        console.log("you are seeing the state" ,this.state.heading);
        console.log("you are seeing the description", this.state.description)
    }

    render() {
        var dataPassingHandler = () => {
            return (<div>
                <Dynamiccomponent  todoprop={this.state.Todo}   handleChange={this.onChangeHandler}  handleSubmit={this.onSubmitHandler}/>
            </div>
            )
        }

        return (
            <div>
                {dataPassingHandler()}
            </div>
        )
    }
}


export default container;

类容器扩展组件{
状态={
//我希望我的数据在标题中显示日期和描述
标题：“”，
日期：''，
说明：“”，
待办事项：{
标题：{type:“text”，value:，占位符：'plese enter heading'，name:“heading”}，
日期：{键入：“日期”，值：，占位符：“请输入日期”，名称：“日期”}，
描述：{value:“请设计一个好的TODO”，占位符：'PLESE enter description'，名称：“description”}
}
}
onChangeHandler=（事件）=>{
console.log（event.value）
这是我的国家({
[event.target.name]：event.target.value
})
//this.setState（{Todo.heading.value:event.target.value}）
}
onSubmitHandler=（）=>{
log（“您已成功单击处理程序”）
log（“您正在看到状态”，this.state.heading）；
log（“您正在看到描述”，this.state.description）
}
render（）{
var dataPassingHandler=（）=>{
返回(
)
}
返回(
{dataPassingHandler（）}
)
}
}
导出默认容器；

1） 在我的容器中，我正在呈现组件，我正在将类型传递给容器，我正在检查我正在创建表单的开关情况

2） 我被困在这里有两个问题第一个是如何通过一次改变

---

3） 第二，如何处理onclick并在容器状态下创建一个新对象，您无法输入，因为您已从

Todo

对象绑定了值

<input type="text"  key="1"  value={toDoProprties.value}  name = {toDoProprties.name} onChange={props.handleChange} />

上面的变更处理程序只是变更状态变量，在状态中直接可用。但是您需要更改

Todo

对象中的值，您可以这样做

onChangeHandler = (event) => {
   //let's take name and value in a variable so that it can be accesiable in complex state updation
   let name = event.target.name;
   let value = event.target.value;

   //This is the object from Todo which needs to be updated
   let updatedTodo = this.state.Todo[name];

   //this is the functional setState, which take's previous state value to calculate the next state
   this.setState(prevState => ({
       Todo: { ...prevState.Todo, [name]: {...updatedTodo, value: value} }
   }))
}

现在您的输入完全受控，您可以输入

此外，您还需要在

Dynamiccomponent

中进行一些更改。对于更改，您可以将代码与此演示进行比较

注意：注意这里

在react中，组件名称应位于

PascalCase

中。例如，

Dynamiccomponent

应该是

Dynamiccomponent

，

container

应该是

container

等等

在创建动态输入的组件中，您应该为每个输入/文本提供

name

，以便

onChange

处理程序能够顺利工作

---

问题是什么？您是否正确获取表单？我无法在输入字段中键入任何内容。您为什么有复杂的待办事项状态？你不能直接使用Todo数组吗？是的，但我想学习（我是新手）在第一次尝试中我使用了数组下一次我想尝试如何提取数据如果给定了对象类型，然后我继续使用流（我忘了更改，我教它工作并继续）一切都没问题，我只是想知道如何动态添加todo状态并进行onChangework@venkatesh，只需了解

功能设置状态

是如何工作的。您可以在internet上搜索。谢谢，它正在工作，但如果我更改一次，我会更改控制台中显示的所有三个。日志我想我错过了一些内容。您能帮我吗，或者我在正确的位置path@m.dvenkatesh，而不是

this.state.Todo.proptype

您应该使用this

this.state.Todo[proptype]

。这里的原型是动态密钥，需要使用

[]

访问动态密钥。是的，但是来自另一个帐户，因为他们阻止了这些帐户，所以我将给你链接。明白了。更新后我不返回（意味着不保存）状态（在此.SetState中），因此组件不呈现

onChangeHandler = (event) => {
   //let's take name and value in a variable so that it can be accesiable in complex state updation
   let name = event.target.name;
   let value = event.target.value;

   //This is the object from Todo which needs to be updated
   let updatedTodo = this.state.Todo[name];

   //this is the functional setState, which take's previous state value to calculate the next state
   this.setState(prevState => ({
       Todo: { ...prevState.Todo, [name]: {...updatedTodo, value: value} }
   }))
}