Question

[解决] 解决方案是：1）＆＃39;扩展React.Component＆＃39;不再自动绑定了。 2）＆＃39; filterText＆＃39;变量需要被发送＆＃39; handleUserInput（filterText）＆＃39; ...

谢谢大家!!

美好的一天。此代码正在处理＆＃34; React.createClass＆＃34;现在我试图将其改为＆＃34;扩展React.Component＆＃34;。目的是通过在输入中输入值来对元素进行排序。

代码：

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

＆＃34; React.createClass＆＃34;的工作代码：

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

出错：我正在尝试输入＆＃34;输入＆＃34;中的任何文本。但它没有写出这个值。我的意思是，我正在打字，但没有任何改变。是因为

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

我该怎么玩呢？如果不设置＆＃39;＆＃39;但是＆＃39; sometext＆＃39;然后这个＆＃39; sometext＆＃39;将是不可改变的。

正如我发现＆＃34; setState＆＃34;不再工作了。如果要使用＆＃39; setState＆＃39;然后有更多的话：

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

反应组件错误（输入）

2 个答案: