フィルタリング反応js

Question

シンプルなフィルタリングのトードリストのヘルプが必要です。削除して作業を追加することができましたが、今は追加されたタスクをフィルタリングしようとしています。エラーメッセージが表示されます。心に留めてくださいありがとう！

TypeError例外は：未定義

26 | this.setState({query: evt.target.value});

import React, {Component} from 'react'; 
import '../App.css'; 
import Form from './Form'; 
import List from './List'; 

class App extends Component { 

state = { 
    query: '', 
    inputValue: "", 
    todos: [ 
     {value: 'Naumiej się Reacta', done: false}, 
     {value: 'Pucuj trzewiki ', done: true}, 
    ] 
} 
handleChange = (evt) => { 
    this.setState({inputValue: evt.target.value}); 
} 
removeMe = (index) =>{ 
    this.setState({ 
     todos: this.state.todos.filter((_, i) => i !== index) 
    }) 
} 

searchChanged(evt) { 
    this.setState({query: evt.target.value}); 
} 

handleSubmit = (evt) => { 
    evt.preventDefault(); 
    const newTodo = { 
     value: this.state.inputValue 
    }; 
    const todos = this.state.todos; 
    todos.push(newTodo); 
    this.setState({todos: todos, inputValue: ''}) 

} 

render() { 
    return (
     <div className="App"> 
      <input type="text" placeholder="Search..." onChange= 
{this.searchChanged} /> 
      <Form 
       handleChange={this.handleChange} 
       inputValue={this.state.inputValue} 
       handleSubmit={this.handleSubmit} 

      /> 
      <List 
       removeMe={this.removeMe} 
       todos={this.state.todos} 
       query={this.state.query} 
      /> 
     </div> 
    ); 
} 
} 

export default App; 

import React, {Component} from 'react'; 
import Task from './Task'; 
class List extends Component { 

render() { 
    let serchedTasks = this.props.todos.filter(
     (todos) => { 
      return todos.value.indexOf(this.props.query) !== -1; 
     } 
    ); 
    return (
     <div className="List"> 
      {serchedTasks.map((todo, index) => { 
       return (
        <Task 
         key={index} 
         index={index} 
         removeMe={this.props.removeMe} 
         todo={todo} 
        /> 
       ) 
      })} 

     </div> 
    ) 
} 
} 
export default List; 

Answer 1

searchChanged(evt)がthisにバインドされていないリストのプロパティ 'SETSTATE' を読み取ることができません。

矢印機能として再定義します。

searchChanged = (evt) => { 
    this.setState({query: evt.target.value}) 
} 

Answer 2

あなたが他の人と行ったように、矢印の機能を使用します。矢印機能へ

searchChanged = (evt) => {