React组件错误（输入）

问题描述：

[已解决] 解决方法是：1）'扩展React.Component'不再自动绑定。 2）'filterText'变量需要发送'handleUserInput（filterText）'...React组件错误（输入）

谢谢大家！

美好的一天。此代码正在处理“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

'的onChange = {this.handleChange.bind（这）}'ES6类需要结合上下文 –

谢谢你的答复。有一个新的错误。只需秒，将在问题 –

'onUserInput = {this.handleUserInput.bind（this）}'中通过它，或者更好地在任何地方使用箭头函数。 –

答

您未结合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> 
     ); 
}

感谢您的回复。完成，通过，但有另一个错误...只是秒，将通过它在问题 –

@IgorErsgow什么错误？ –

编辑该问题，请参阅代码。 –

答

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' 
    } 
}

谢谢。如果我按照你的建议使用'setState'，我还有一个错误（为什么我有这么多的错误？！）在问题的最后添加... –

我更新了我的答案，只是确保你浏览了我的文档https://reactjs.org/docs/ – monssef

，并且写了“setState”不再适用。只是“国家”。如果我使用“状态”，则输入时不会更新数值。 –

React组件错误（输入）

相关推荐