reactjs - 反应js中未定义handleChange

问题描述

每当我使用箭头函数并且没有将方法绑定到类构造函数中的“this”时，我都会收到一个错误消息，说handleChange 是未定义的。我正在看一个教程，讲师说我们可以使用箭头函数定义自己的方法来克服将方法绑定到“this”的问题。这是我的代码：

import React, { Component } from 'react';
//import logo from './logo.svg';
import './App.css';
import CardList from "./cardlist_component";
import SearchBox from "./search-box";
class  App extends Component {
  constructor(){
    super();
      this.state = {
        monsters: [],
        searchField: ""
      }

      //  this.handleChange = this.handleChange.bind(this)
    }

    componentDidMount(){
      fetch('https://jsonplaceholder.typicode.com/users')
      .then(response => response.json())
      .then(user => this.setState({monsters:user}));
    }

     handleChange = (e) => {
      this.setState({searchField:e.target.value});
    };
    


  render(){
    const { monsters,searchField } = this.state;
    const filteredMonsters = monsters.filter(whatever => 
      whatever.name.toLowerCase().includes(searchField.toLowerCase())
      )
    return(
      <div className="App">
        <SearchBox handleChange={this.handleChange} />
        <CardList monsters={filteredMonsters}/>
      </div>

    );
  }
}

 
export default App;

为了将我的代码与教程同步，我不得不稍微降级我的 React 和 create-react-script。这是 package.json 文件：

{
  "name": "monsters-rolodex",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

这是我的搜索框代码：

import React from 'react';
import "./search-box-styles.css";

const SearchBox = (props) => {
    return(
        <div className="search">
            <input type="search" 
            placeholder="search monsters" 
            onChange={props.handleChange}
            />
        </div>

    );
}

export default SearchBox;

以及截图：

我的索引代码：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));


serviceWorker.unregister();

请查看我的 index.js 和 package.json 文件

标签： reactjs

发现问题了！！！！

我将 react 和 react-dom 升级到 16.13.1，将 react-scripts 升级到 3.4.3。然后改变了我的 index.js。新的 index.js 代码：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
// import * as serviceWorker from './serviceWorker';

// ReactDOM.render(<App />, document.getElementById('root'));
const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);

我觉得跟新的有关系

  <React.StrictMode>
    <App />
  </React.StrictMode>,

代码，因为我降级了我的反应脚本，所以之前没有。 不过感谢您的回复:)

reactjs - 反应js中未定义handleChange

问题描述

解决方案

推荐阅读