Question

我正在尝试创建一个将输入文本打印到屏幕的组件，这就是我正在做的工作。

class SearchBar extends Component {
  constructor(props) {
    super(props);

    this.state = { term: '' };
  }

  render() {
    return (
      <div className="search-bar">
        <input value={this.state.term} onChange={event => this.SetState(event.target.value)} />
        The value of input is: {this.state.term}
      </div>
    );
  }
}

但是我在Chrome控制台中一直收到错误：

bundle.js:19818 Uncaught TypeError: _this2.SetState is not a function

有什么想法吗？

谢谢

Answer 1

试试这个：

class SearchBar extends Component {
  constructor(props) {
    super(props);
    this.state = { term: '' };
    this.setInputState = this.setInputState.bind(this);
  }
  
  setInputState(event) {
    this.setState({ term: event.target.value });
  }

  render() {
    return (
      <div className="search-bar">
        <input value={this.state.term} onChange={this.setInputState} />
        The value of input is: {this.state.term}
      </div>
    );
  }
}

Answer 2

我认为你需要绑定你的，试试这个（没有双关语）。

 render() {
    return (
      <div className="search-bar">
        <input value={this.state.term} onChange={event => this.setState.bind(this, event.target.value)} />
        The value of input is: {this.state.term}
      </div>
    );
  }

Answer 3

你必须绑定{event =＆gt; this.SetState（event.target.value）}函数来组件。问题是你的onChange函数没有运行你的组件这个上下文

代码看起来应该是这样的

const onChange = (event) => { this.setState({term:event.target.value}) }

 <input value={this.state.term} onChange={onChange.bind(this) />

Answer 4

我相信您必须指明州内的变化：

this.setState({ term: event.target.value });

而不是

this.setState( event.target.value );

Answer 5

尝试以下代码：

class SearchBar extends Component {
  constructor(props) {
    super(props);
    this.state = { term: '' };
  }

  render() {
    return (
      <div className="search-bar">
        <input value={this.state.term} onChange={event => this.setState({term:event.target.value})} />
        The value of input is: {this.state.term}
      </div>
    );
  }
}

Answer 6

这对我有用。我认为您错过了状态键名称term以及该SetState，它应该是setState。只需按照下面的示例，确保它也将对您有效。

class Square extends React.Component {

constructor(props){
    super(props)
    this.state = {
        value: null
    };
}

render() {
  return (
  <button 
      className="square"  
      onClick={()=> this.setState({value:'X'})}>

    {this.state.value}

  </button>
  );
}


}

Answer 7

 class SearchBar extends Component {
  constructor(props) {
    super(props);

    this.state = { term: '' };
  }

  render() {
    return (
      <div className="search-bar">
        <input value={this.state.term} onChange={event => this.SetState(event.target.value)} />
        The value of input is: {this.state.term}
      </div>
    );
  }
}

您写的是SetState而不是

Answer 8

我遇到了类似的问题，并且注意到我使用的是this.state.setState()方法而不是this.setState()。

尽管OP的问题是大写错误。

React - _this2.SetState不是函数

8 个答案: