this.props.createTask沒有定義

我下面這個教程React Tutorial this.props.createTask沒有定義

這裏是東西：我從創建-todo.js調用函數的CreateTask; 的功能在app.js

定義app.js

import React from 'react'; 
import ToDosList from './todos-list'; 
import CreateToDoItem from './create-todo-item' 

const todoitems=[ 
{ 
    task: 'finish react todo tutorial', 
    isCompleted: false 
}, 

{ 
    task: 'eat lunch', 
    isCompleted: true 
} 
]; 


export default class App extends React.Component 
{ 
    constructor(props){ 
     super(props) 

     this.state={ 
      todoitems 
     }; 
} 
render() 
{ 
    return(
      <div> 
       <h1>React Demo App - ToDos </h1> 
       <CreateToDoItem createtask ={this.createTask.bind(this)}/> 
       <ToDosList 
       todoitems={this.state.todoitems} 
       /> 
      </div> 
    ); 
} 

createTask(task) 
{ 
    //alert('called'); 
    this.state.todoitems.push({ 
     task, 
     isCompleted:false 
    }); 
    this.setState({todoitems: this.state.todoitems}); 
    } 
}

創建-todo.js

import React from 'react'; 
import App from './app'; 

export default class CreateToDoItem extends React.Component 
{ 
render() 
{ 
    return(
     <form onSubmit={this.handleCreate.bind(this)}> 
      <input type="text" placeholder="what do I need to do?" ref="createInput"/> 
      <button>Create</button> 
     </form> 
    ); 
} 

handleCreate(event) 
{ 
    event.preventDefault(); 
    //alert('called'); 
    this.props.createTask(this.refs.createInput.value); //this throws error 
} 
}

我絕對新React.js。我不知道這是如何工作的。該函數是否可用於create-todo.js？代碼就是它在教程中的顯示方式。

來源

2017-06-20 adityawho

** **錯字，用'createtask'不是'createTask'，就像這樣：'this.props.createtask（）'，因爲你在'props'中通過'createtask'鍵和實際的函數名是'createTask'。 –

謝謝bhai ...！把它作爲答案。 – adityawho

原因是，y您將通過另一個密鑰將function傳遞給props，並通過不同的密鑰使用內部孩子。

實際函數名稱：createTask

的關鍵道具傳球：createtask

內用孩子的：createTask

所以使用this.props.createtask()代替this.props.createTask()

來源

2017-06-21 05:06:57

您的道具被命名爲「createtask」。你應該改變你的道具名稱爲createTask（而不是改變對this.props.createtask的引用）。

來源

2017-06-20 20:55:06

你可以這樣做：

import React from 'react'; 
import ToDosList from './todos-list'; 
import CreateToDoItem from './create-todo-item' 

const items = [ 
    { 
    task: 'finish react todo tutorial', 
    isCompleted: false 
    }, 

    { 
    task: 'eat lunch', 
    isCompleted: true 
    } 
]; 


export default class App extends React.Component { 
    state = { 
     todoitems: items, 
     taskItem: '' 
    } 


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


    handleCreate =() => { 
    e.preventDefault() 

    item = { 
     task: taskItem, 
     isCompleted: false // default value 
    } 

    this.setState({ 
     todoitems: [...this.state.todoitems, item ] 
    }) 
    } 


    render() { 
    return (
     <div> 
     <h1>React Demo App - ToDos </h1> 
     <CreateToDoItem 
     handleChange={this.handleChange} 
     handleCreate={this.handleCreate} 
     taskItem={this.state.taskItem} 
      /> 
     <ToDosList todoitems={this.state.todoitems} 
     /> 
     </div> 
    ); 
    } 
}

那麼你的形式將是：

import React from 'react'; 
import App from './app'; 

    export const CreateToDoItem = (props) => (
      <form onSubmit={props.handleCreate}> 
       <input type="text" placeholder="what do I need to do?" 
       onChange={props.handleChange} 
       value={props.taskItem} /> 
       <button type='submit'>Create</button> 
      </form> 
    );

我希望它幫你:)

請，

來源

2017-06-20 21:16:23

this.props.createTask沒有定義

回答

相關問題