陣營：元素正在改變類型文本的控制輸入不受控制

，我發現了以下錯誤，但一直沒能找出爲什麼它正在發生陣營：元素正在改變類型文本的控制輸入不受控制

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

陣營：元素正在改變類型文本的控制輸入不受控制

回答

相關問題