Javascript 反应：元素正在将文本类型的受控输入更改为非受控输入

我得到了以下错误，但无法确定它发生的原因

警告.js:36警告：Searchbox正在将文本类型的受控输入更改为非受控输入。输入元件不应从受控切换到非受控（反之亦然）。决定在组件的使用寿命内使用受控或非受控输入元件

class TextFieldItem extends React.Component{
        constructor(props){
            super(props);
            this.onChange=this.onChange.bind(this);
        }
        onChange(e){
            event.preventDefault();
            const {onFieldChange,field} = this.props;   
            onFieldChange(e.target.id, e.target.value, e.target.name,field.Type);
        }
        render(){        
            const {field, onFieldChange, onRecordUpdate, IsLookupField,record,currentDocumentType} = this.props;       
            const fieldValue = (field.Value == null) ? '' : field.Value;
            return (
                <div>
                    <label>{field.Name}</label> 
                    <input type="text" key={field.Id} className="form-control" id={field.Id} name={field.Name} onChange={this.onChange} value={fieldValue} />     
                    {IsLookupField && <LookupFieldItem record={record} field={field} onRecordUpdate={onRecordUpdate} documentType={currentDocumentType} /> }
                </div>
                );
        }
    }
         export default TextFieldItem;

我有以下文件：

Searchbox.js

import React，{Component}来自'React'；
类Searchbox扩展组件{
//渲染方法
render（）{
const{value，onChange，onSubmit，children}=this.props
console.log（值）
console.log（onChange）
console.log（onSubmit）
console.log（子级）
返回(
{儿童}
)
}
}
导出默认搜索框问题出在搜索更改功能中。您已将输入的onChange事件命名为e，但您正在从全局变量event获取值

将搜索更改为以下代码：

onSearchChange(event) {
   this.setState({ searchTerm: event.target.value })
}

问题出在搜索更改功能中。您已将输入的onChange事件命名为e，但您正在从全局变量event获取值

将搜索更改为以下代码：

onSearchChange(event) {
   this.setState({ searchTerm: event.target.value })
}

我也收到了同样的警告。My TextFieldItem是通过其道具更新的子组件。以下是罪魁祸首

const fieldValue = (field.Value == null) ? undefined : field.Value;

将行更改为将值从未定义设置为“”时，已解决警告

const fieldValue = (field.Value == null) ? '' : field.Value;

反应组分

class TextFieldItem extends React.Component{
        constructor(props){
            super(props);
            this.onChange=this.onChange.bind(this);
        }
        onChange(e){
            event.preventDefault();
            const {onFieldChange,field} = this.props;   
            onFieldChange(e.target.id, e.target.value, e.target.name,field.Type);
        }
        render(){        
            const {field, onFieldChange, onRecordUpdate, IsLookupField,record,currentDocumentType} = this.props;       
            const fieldValue = (field.Value == null) ? '' : field.Value;
            return (
                <div>
                    <label>{field.Name}</label> 
                    <input type="text" key={field.Id} className="form-control" id={field.Id} name={field.Name} onChange={this.onChange} value={fieldValue} />     
                    {IsLookupField && <LookupFieldItem record={record} field={field} onRecordUpdate={onRecordUpdate} documentType={currentDocumentType} /> }
                </div>
                );
        }
    }
         export default TextFieldItem;

class TextFieldItem扩展了React.Component{
建造师（道具）{
超级（道具）；
this.onChange=this.onChange.bind（this）；
}
onChange（e）{
event.preventDefault（）；
const{onFieldChange，field}=this.props；
onFieldChange（e.target.id、e.target.value、e.target.name、field.Type）；
}
render（）{
const{field，onFieldChange，onRecordUpdate，IsLookupField，record，currentDocumentType}=this.props；
常量fieldValue=（field.Value==null）？“”：field.Value；
返回(
{field.Name}
{IsLookupField&&}
);
}
}
导出默认TextFieldItem；
我收到了同样的警告。My TextFieldItem是通过其道具更新的子组件。以下是罪魁祸首

const fieldValue = (field.Value == null) ? undefined : field.Value;

将行更改为将值从未定义设置为“”时，已解决警告

const fieldValue = (field.Value == null) ? '' : field.Value;

反应组分

class TextFieldItem extends React.Component{
        constructor(props){
            super(props);
            this.onChange=this.onChange.bind(this);
        }
        onChange(e){
            event.preventDefault();
            const {onFieldChange,field} = this.props;   
            onFieldChange(e.target.id, e.target.value, e.target.name,field.Type);
        }
        render(){        
            const {field, onFieldChange, onRecordUpdate, IsLookupField,record,currentDocumentType} = this.props;       
            const fieldValue = (field.Value == null) ? '' : field.Value;
            return (
                <div>
                    <label>{field.Name}</label> 
                    <input type="text" key={field.Id} className="form-control" id={field.Id} name={field.Name} onChange={this.onChange} value={fieldValue} />     
                    {IsLookupField && <LookupFieldItem record={record} field={field} onRecordUpdate={onRecordUpdate} documentType={currentDocumentType} /> }
                </div>
                );
        }
    }
         export default TextFieldItem;

class TextFieldItem扩展了React.Component{
建造师（道具）{
超级（道具）；
this.onChange=this.onChange.bind（this）；
}
onChange（e）{
event.preventDefault（）；
const{onFieldChange，field}=this.props；
onFieldChange（e.target.id、e.target.value、e.target.name、field.Type）；
}
render（）{
const{field，onFieldChange，onRecordUpdate，IsLookupField，record，currentDocumentType}=this.props；
常量fieldValue=（field.Value==null）？“”：field.Value；
返回(
{field.Name}
{IsLookupField&&}
);
}
}
导出默认TextFieldItem；
对我来说工作正常。只需将代码粘贴到代码笔中，没有警告或错误。对我来说工作正常。只需将代码粘贴到代码笔中，没有警告或错误。加油！我不敢相信自己！我一直在绞尽脑汁寻找这个问题！React的警告信息应该更有用！非常感谢你的礼节！！抢手货（y） 当传递给输入的值从未定义值更改为字符串值或从字符串值更改为未定义值时，通常会出现此警告。如果该值由属性更新，该怎么办？我有一个子组件，它的值正在由父组件通过props更新，并且我正在接收这个确切的errorConst值=this.props.value | |'”。将此值传递给输入组件。来吧！我不敢相信自己！我一直在绞尽脑汁寻找这个问题！React的警告信息应该更有用！非常感谢你的礼节！！抢手货（y） 当传递给输入的值从未定义值更改为字符串值或从字符串值更改为未定义值时，通常会出现此警告。如果该值由属性更新，该怎么办？我有一个子组件，它的值正在由父组件通过props更新，并且我正在接收这个确切的errorConst值=this.props.value | |'”。将此值传递给输入组件。