React组件错误（输入）

  • Z时代
  • 2024-01-10
  • 分类：问答

[已解决] 解决方法是：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> 
     ); 
}

回答：

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

以上是 React组件错误（输入） 的全部内容， 来源链接： utcz.com/qa/262365.html

回到顶部