Как запустить анимацию в React. js? «Ошибка типа: невозможно прочитать свойство 'startAnimation' из неопределенного» - PullRequest
Новая
       25

Как запустить анимацию в React. js? «Ошибка типа: невозможно прочитать свойство 'startAnimation' из неопределенного»

0 голосов
/ 23 апреля 2020

Я пытаюсь запустить анимацию в моем приложении to-do.list из значка onCLick, но получаю ошибку типа: 

TypeError: Cannot read property 'startAnimation' of undefined
(anonymous function)
C:/Users/adm/Desktop/toDo-List/finalize/finalize/src/listitems.js:25
  22 |            
  23 |       
  24 |        <FontAwesomeIcon
> 25 |         className="faicons" onClick={this.startAnimation}   
     | ^  26 |         onClick={() => {props.deleteItem(item.key)}}
  27 | 
  28 |         
View compiled
ListItems
C:/Users/adm/Desktop/toDo-List/finalize/finalize/src/listitems.js:11
   8 |    
   9 |    const items = props.items;
  10 | 
> 11 |    const listitems = items.map(item =>
     | ^  12 |    {
  13 |        return <div className ="list" key={item.key}>
  14 |          <p>

Это список элементов. js где " FontAwesomeIcon "onClick должен вызвать анимацию: 

import React from 'react';
import './listitems.css'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import Ilotulitus from './Animation.js'


function ListItems(props){

    const items = props.items;

    const listitems = items.map(item =>
    {
        return <div className ="list" key={item.key}>
          <p>
         <input type="text" 
          id={item.key}
          value={item.text} 
          onChange={(e)=>{
             props.setUpdate(e.target.value,item.key)}}/>
        <span>
        <FontAwesomeIcon
         className="faicons" onClick={this.startAnimation}   
         onClick={() => {props.deleteItem(item.key)}}


         icon="trash" />

        </span>
     </p>

        </div>
    })
    return(
        <div>
            {listitems}

            </div>
    )
}
export default ListItems;

Я определил функцию startAnimation в моем приложении. js, фактическая анимация находится в моем css -файле. 

  class App extends React.Component{

      constructor(props){
        super(props);
        this.state={
          items:[],
          currentItem:{
            text:'',
            key:'',
            classNames: ''}
        }

        this.handleInput = this.handleInput.bind(this);
        this.addItem = this.addItem.bind(this);
        this.deleteItem = this.deleteItem.bind(this);
        this.setUpdate = this.setUpdate.bind(this);
        this.startAnimation = this.startAnimation.bind(this);


      }
      startAnimation = () => {
        const { classNames } = this.state;

        this.setState({ classNames: "animation" });
      };

          handleInput(e) {
            this.setState({
              currentItem:{
                text: e.target.value,
                key: Date.now()

              }        
            })
          }

      addItem(e){
        e.preventDefault();
        const newItem = this.state.currentItem;
        console.log(newItem);
        if(newItem.text!==""){
          const newItems=[...this.state.items, newItem];
          this.setState({
            items:newItems,
            currentItem:{
              text:'',
              key:''
            }
          })
        }
      }

     deleteItem(key){
        const filteredItems = this.state.items.filter(item =>
          item.key!==key);
        this.setState({
          items: filteredItems  
        })
      }
      setUpdate(text,key){
        console.log("items:"+this.state.items);
        const items = this.state.items;
        items.map(item=>{      
          if(item.key===key){
            console.log(item.key +"    "+key)
            item.text= text;
          }
        })
        this.setState({
          items: items
        })
      }


        render() {

       return (

        <div className="App">
          <Hola />

         <header>

           <form id="to-do-form" onSubmit={this.addItem}>
             <input type="text" placeholder="Enter text"
             value={this.state.currentItem.text} onChange={this.handleInput}/>
             <button type="submit">Add</button>

           </form>
         </header>
         <ListItems items={this.state.items} deleteItem={this.deleteItem} setUpdate={this.setUpdate} startAnimation={this.startAnimation}/>
         </div>

      );
     }

    }

    export default App

;

Функциональное назначение заключается в том, что после удаления пользователем элемента из приложения воспроизводится анимация. Должны ли состояния быть определены в списках. js также?

1 Ответ

0 голосов
/ 23 апреля 2020

Измените onClick={this.startAnimation} на onClick={props.startAnimation}. Ваш компонент App является "компонентом класса", тогда как ваш компонент ListItems является "компонентом функции". Вот статья, которую я нашел о различиях , но быстрый поиск должен дать вам гораздо больше результатов. Официальная документация React также является хорошим местом для поиска. Главное, что вы можете использовать this в компоненте класса, а не в компоненте функции. В компоненте функции передаваемые ему атрибуты собираются в первом параметре, в вашем случае props.

...