小编use*_*477的帖子

我有一个包含三个字段的表单,handleChange方法在第一个字段(DateOfBirth)中工作,但不在(Id1)和(Id2)字段中工作.

由于某种原因,当我尝试更改(Id1 || Id2)字段的值时,setState会返回此错误.

"组件正在改变文本类型的受控输入,使其不受控制.输入元素不应从受控切换到非受控(反之亦然).在组件的生命周期内使用受控或不受控制的输入元素之间做出决定"

import React, { Component } from 'react';

class Form extends React.Component {

    constructor(props){
        super(props);
        this.state = { DateOfBirth:'1990-01-24', Metadata: {Id1:'33813518109', Id2:'John Doe'}}
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(event) { 
        const target = event.target;
        const name = target.name;        
        var value = target.value;         

        if(name === "Id1" || name === "Id2")            
            this.setState({Metadata:{[name]: value}});     
        else
            this.setState({[name]: value});
    }  

    render() { 
        return (             
            <div>
                <form onSubmit={this.handleSubmit}>                                          
                    <input name="DateOfBirth" type="date" onChange={this.handleChange} value={this.state.DateOfBirth} />                                           
                    <input name="Id1" type="text" onChange={this.handleChange} value={this.state.Metadata.Id1} …