필터링 반응 js

Question

나는 단순한 필터링 할 일 목록에 도움이 필요하다. 나는 제거하고 더할 수있는 작업을 추가하는 것을 좋아하지만, 지금은 추가 된 작업을 필터링하려고하는데, 나는 완전히 초보자이다. 그 점을 염두에 두십시오. 감사합니다!

형식 오류 : 정의되지 않은

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) => {

Answer 2

당신이 다른 사람처럼 화살표 기능을 사용합니다.