反应组件错误（输入）

Question

[SOLVED] Solution was: 1) the 'extends React.Component' doesn't autoBind any more. 2) 'filterText' variable needed to be sended 'handleUserInput(filterText)'...

Thank you for All!!

Good day. This code is working on "React.createClass" and now I'm trying to change it to "extends React.Component". The aim is to sort the elements by entering value into input.

The code :

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>
  );
  }

The WORKING code of the "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>
     );
    } 
    });

Have an error: I am trying to input any text in the "input" but it doesn't write the value. I mean, I am typing, but nothing changes. is it because of

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

And how should I play with it? If to set not '' but 'sometext' then this 'sometext' will be unchangable.

As I found "setState" is no longer working. And if to use 'setState' then have oooone more:

 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

You didn't bind the handleChange() . To fix this problem you have to bind the methods which are using "this" in constructor(). Try the following code

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 = {...} will not trigger a re-render, to update your state use the setState function

setState can take either an object

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

or a function

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

make sure you initialize your state object in your constructor as follows

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