React組件錯誤（輸入）

Question

[已解決] 解決方法是：1）'擴展React.Component'不再自動綁定。 2）'filterText'變量需要發送'handleUserInput（filterText）'...

謝謝大家！

美好的一天。 此代碼正在處理「React.createClass」，現在我試圖將其更改爲「擴展React.Component」。 目的是通過輸入值來對元素進行排序。

的代碼：

TheSecondComponent... 
constructor(props){ 
super(props); 
} 
handleChange() { 
this.props.onUserInput(
    this.refs.filterTextInput.value 
); 
} 
render() { 
return (
    <form className='Center'> 
    <input 
     type="text" 
     value={this.props.filterText} 
     ref="filterTextInput" 
     onChange={this.handleChange} 
    /> 
    </form> 
); 
} 

TheFirstComponent... 
constructor(){ 
super(); 
this.state={'filterText': ''} // If to use setState here than I have one 
           more error, added in the end of the question 
this.handleUserInput=this.handleUserInput.bind(this); 
} 
getInitialState() { 
return { 
    filterText: '' 
}; 
} 
handleUserInput(filterText) { 
//this.setState({filterText: filterText}); 
this.state = {filterText: filterText}; 
} 
render() { 
    return (
    <div> 
    <div> 
    <SearchBar 
     filterText={this.state.filterText} 
     onUserInput={this.handleUserInput} 
    /> 
    <CreateButtons 
     source={this.props.citys} 
     filterText={this.state.filterText} 
    /> 
    </div> 
    </div> 
); 
    } 

的WORKING代碼 「React.createClass」 的：

TheFirstComponent... 
({ 
handleChange: function() { 
this.props.onUserInput(
    this.refs.filterTextInput.value 
); 
}, 
render: function() { 
    return (
    <form className='Center'> 
    <input 
     type="text" 
     value={this.props.filterText} 
     ref="filterTextInput" 
     onChange={this.handleChange} 
    /> 
    </form> 
    ); 
    } 
    }); 

    TheSecondComponent... 
    ({ 
    getInitialState: function() { 
    return { 
    filterText: '' 
    }; 
    }, 
    handleUserInput: function(filterText) { 
    this.setState({ 
    filterText: filterText 
    }); 
    }, 
    render: function() {cl(this); 
    return (
    <div> 
    <div className='SLFirst'> 
    <SearchBar 
     filterText={this.state.filterText} 
     onUserInput={this.handleUserInput} 
    /> 
    <CreateButtons 
     source={this.props.citys} 
     filterText={this.state.filterText} 
    /> 
    </div> 
    </div> 
    ); 
    } 
    }); 

有一個錯誤： 我想輸入的任何文本「輸入」但它不寫入值。我的意思是，我在打字，但沒有任何變化。是因爲

this.state={'filterText': ''}？

我應該怎麼玩？如果不設置''而是'一些文本'，那麼這個'sometext'將是不可修改的。

由於我發現「setState」不再有效。 如果使用 '的setState'，那麼有oooone更多：

TypeError: Cannot read property 'filterText' of null 
    40 | <div> 
    41 | <div className='SLFirst'> 
    42 | <SearchBar 
> 43 |  filterText={this.state.filterText} 
    44 |  onUserInput={this.handleUserInput} 
    45 | /> 
    46 | <CreateButtons 

Answer 1

您未結合handleChange（）。 要解決此問題，您必須綁定在構造函數（）中使用「this」的方法。試試下面的代碼

constructor(props){ 
    super(props); 
    this.handleChange = this.handleChange.bind(this) 
} 

handleChange() { 
this.props.onUserInput(
this.refs.filterTextInput.value 
); 
} 
render() { 
return (
    <form className='Center'> 
     <input 
     type="text" 
     value={this.props.filterText} 
     ref="filterTextInput" 
     onChange={this.handleChange} 
    /> 
    </form> 
     ); 
} 

Answer 2

this.state = {...}不會引發重新渲染， 更新您的狀態下使用該的setState功能

的setState可以採取或者對象

//the following will update the filterText property on the state object 
    this.setState({filterText: ''}) 

或函數

this.setState(function(state){ 
    state.filterText = ''; 
    // make sure you return state 
    return state 
}) 

確保你初始化狀態對象在構造函數如下

constructor(props){ 
    super(props); 
    this.state = { 
     filterText: 'initiale value' 
    } 
}