反应组件错误（输入）

Question

[已解决]解决方案是：1）'extends React.Component'不再自动绑定。 2）'filterText'变量需要被发送'handleUserInput（filterText）'...

感谢你所做的一切！！

美好的一天。此代码正在处理“React.createClass”，现在我正在尝试将其更改为“extends 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>
  );
  }

“React.createClass”的WORKING代码：

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'那么这个'sometext'将是不可替换的。

正如我发现“setState”不再有效。如果要使用'setState'，那么请使用更多：

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