当前位置: 首页 > 面试题库 >

带ES6的ReactJS:当我交流两个组件时,this.props不是一个函数

隗和裕
2023-03-14
问题内容

我正在使用带有ES6的ReactJS,但是在通过props交流child> parent时遇到一些问题。我的方法示例:

class SearchBar extends React.Component {
  handler(e){
    this.props.filterUser(e.target.value);
  }

  render () {
  return <div>
    <input type='text' className='from-control search-bar' placeholder='Search' onChange={this.handler} />
  </div>
  }
}


export default class User extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: '', age: '', filter: ''};
  }

  filterUser(filterValue){
    this.setState({
      filter: filterValue
    });
  }

  render() {
    return <div>
      <SearchBar filterUser={this.filterUser} />
      <span>Value: {this.state.filter}</span>
    </div>
  }
}

这返回Uncaught TypeError: this.props.filterUser is not a function

任何想法?绑定也许?

[编辑]解决方案(感谢@knowbody和@Felipe Skinner):

我在构造函数中缺少绑定。在SearchBar构造函数中的绑定可以完美地工作。

使用React.createClass()(ES5),它会自动this为您的功能进行绑定。在ES6中,您需要this手动绑定。更多信息https://facebook.github.io/react/docs/reusable-
components.html#es6-classes


问题答案:

您缺少构造函数中的绑定,props如果您没有在构造函数中使用它们,也不需要通过。另外你还需要import { PropTypes } from 'react'

class SearchBar extends React.Component {

  constructor() {
    super();
    this.handler = this.handler.bind(this);
  }

  handler(e){
    this.props.filterUser(e.target.value);
  }

  render () {
    return (
      <div>
        <input type='text' className='from-control search-bar' placeholder='Search' onChange={this.handler} />
      </div>
    );
  }
}


export default class User extends React.Component {
  constructor() {
    super();
    this.filterUser = this.filterUser.bind(this);
    this.state = { name: '', age: '', filter: '' };
  }

  filterUser(filterValue){
    this.setState({
      filter: filterValue
    });
  }

  render() {
    return ( 
      <div>
        <SearchBar filterUser={this.filterUser} />
        <span>Value: {this.state.filter}</span>
      </div>
    );
  }
}


 类似资料:
  • 我刚开始使用ReactJS,有点被我遇到的一个问题卡住了。 我的应用程序本质上是一个带有过滤器和更改布局的按钮的列表。目前我正在使用三个组件:、和,显然,当我更改中的设置时,我希望触发中的某个方法来更新我的视图。 我如何使这3个组件相互交互,或者我需要某种全局数据模型,在那里我可以只对它进行更改?

  • 你好,我是这个reactjs的新手,我目前在Egghead尝试了一些课程,当我尝试使用map从数据数组创建React组件时,我遇到了一些错误,我不理解,因为我已经有了相同的代码 当我尝试过滤它时,会出现这个错误,就像我不能用键名调用数组项一样,该数组是从api获取的

  • 问题内容: 我刚开始使用ReactJS,但对我遇到的问题有些困惑。 我的应用程序本质上是一个带有过滤器的列表和一个用于更改布局的按钮。目前我使用的三个组成部分:,和,现在很明显,当我更改设置,在我想引起一些方法来更新我的看法。 如何使这三个组件相互交互,或者我需要可以对其进行更改的某种全局数据模型? 问题答案: 最佳方法取决于您计划如何安排这些组件。现在想到的一些示例场景: 是的子组件 这两个和是

  • 我想在中的包中使用功能,它有一个需求,作为

  • 本文向大家介绍如果同时定义了两个函数,一个带const,一个不带,会有问题吗?相关面试题,主要包含被问及如果同时定义了两个函数,一个带const,一个不带,会有问题吗?时的应答技巧和注意事项,需要的朋友参考一下 不会,这相当于函数的重载。

  • 问题内容: 的意义是什么 我正在尝试那样使用它 问题答案: 它被称为传播属性,其目的是使道具的传递更加容易。 让我们假设您有一个接受N个属性的组件。如果数量增加,将这些信息传递下去可能是乏味且笨拙的。 因此,您可以这样做,将它们包装在一个对象中并使用扩展符号 它将把它解压缩到组件上的props中,即,仅当将props传递给另一个组件时,才“永远” 在函数内部使用。照常使用打开包装的道具。