• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

React组件错误(输入)

JavaScript 来源:Igor Ersgow 3次浏览

[已解决] 解决方法是: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 


===========解决方案如下:

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

版权声明:本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。
喜欢 (0)