在反应中动态呈现表单

Question

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

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;

下面是渲染我的组件的容器

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;

1) 在我的容器中，我正在渲染组件，我正在将类型传递给容器，我正在检查 switch case 我正在创建表单

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

3）其次如何处理onclick并在容器状态下创建一个新对象

Answer 1

您无法输入，因为您已绑定来自Todo 对象的值，

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

但您并没有在此处更改 Todo 对象中的值，

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

上面的 change handler 只是改变 state 变量，直接在 state 中可用。但是你需要改变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 中进行一些更改。对于更改，您可以将您的代码与此演示进行比较，

Demo

注意：在这里做一些笔记。

1. 在反应组件名称应该在PascalCase。例如，Dynamiccomponent 应该是 DynamicComponent，container 应该是 Container 等等。
2. 在您创建动态输入的组件中，您应该为每个输入/文本提供 name，以便您的 onChange 处理程序顺利运行。