阵营：元素正在改变类型文本的控制输入不受控制

，我发现了以下错误，但一直没能找出为什么它正在发生阵营：元素正在改变类型文本的控制输入不受控制

warning.js：36警告：搜索正在改变受控输入的文字类型将不受控制。输入元素不应该从受控状态切换到非受控状态（反之亦然）。使用受控的或不受控制的输入元件，用于所述部件的寿命之间决定

我已经得到了以下文件：

Searchbox.js

import React, { Component } from 'react'; 
 
    
 
    class Searchbox extends Component { 
 
    
 
     // render method 
 
     render() { 
 
     const { value, onChange, onSubmit, children } = this.props 
 
     console.log(value) 
 
     console.log(onChange) 
 
     console.log(onSubmit) 
 
     console.log(children) 
 
     return (
 
      <section className="search-section"> 
 
      <form onSubmit={onSubmit}> 
 
       <input 
 
       type="text" 
 
       className="search-box" 
 
       value={value} 
 
       onChange={onChange} 
 
       /> 
 
       <button type="submit">{children}</button> 
 
      </form> 
 
      </section> 
 
     ) 
 
     } 
 
    } 
 
    
 
    export default Searchbox

和App.js文件

import React, { Component } from 'react'; 
 
import Searchbox from './components/Searchbox' 
 
//import logo from './logo.svg'; 
 
import './App.css'; 
 

 
const DEFAULT_TERM = 'High Fidelity' 
 

 
class App extends Component { 
 

 
    // Constructor 
 
    constructor(props) { 
 
    super(props) 
 

 
    this.state = { 
 
     movie: null, 
 
     searchTerm: DEFAULT_TERM 
 
    } 
 

 
    this.onSearchSubmit = this.onSearchSubmit.bind(this) 
 
    this.onSearchChange = this.onSearchChange.bind(this) 
 
    } 
 

 

 
    // onSearchSubmit method 
 
    onSearchSubmit(e) { 
 
    e.preventDefault() 
 
    console.log("Searching movie with name" + this.status.searchTerm) 
 
    } 
 

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

 
    // render method 
 
    render() { 
 

 
    const { movie, searchTerm } = this.state 
 

 
    return (
 
     <div className="App"> 
 
     <Searchbox 
 
      value={searchTerm} 
 
      onChange={this.onSearchChange} 
 
      onSubmit={this.onSearchSubmit} 
 
     >Search 
 
     </Searchbox> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
export default App;

在负载一切都很好，但是当我在文本字段中键入一些则错误被触发。

有什么建议吗？

来源

2017-04-21 MrCujo

它为我工作的罚款。 –

刚刚将你的代码粘贴到一个codepen中，并没有任何警告或错误 –

问题出在onSearchChange函数中。您有一个名为输入的onChange事件为ê，但你是从全局变量事件采取价值

更换onSearchChange代码如下所述：

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

来源

2017-04-21 04:30:36

来吧！我无法相信自己！我一直在b my我的脑袋寻找这个问题！ React的警告消息应该更有帮助！非常感谢Ritesh！接得好！（y） – MrCujo

当传递给输入的值从undefined更改为字符串值时，通常会发生此警告，反之亦然。 –

如果值正在通过道具进行更新，该怎么办？我有一个子组件，它的值由父组件通过道具更新，我收到了这个确切的错误 – monkeyjumps

我收到完全相同的警告。我的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;

来源

2017-06-08 15:31:06 monkeyjumps

阵营：元素正在改变类型文本的控制输入不受控制

回答

相关问题