this.props.createTaskが、私はこのチュートリアルここ<a href="https://www.youtube.com/watch?v=IR6smI_YJDE&t=123s" rel="nofollow noreferrer">React Tutorial</a></p> <p>次い

Question

定義されていない事です： 私が作成-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で使用できるはずですか？コードはチュートリアルでの表示方法とまったく同じです。

Answer 1

理由は、y他のキーでfunctionをpropsに渡し、別のキーで内部の子を使用しています。その代わりにthis.props.createTask()

Answer 2

あなたの小道具の名前は "createtask"です。おそらく、あなたの小道具名をcreateTaskに変更するべきです（this.props.createtaskへの参照を変更するのではなく）。

Answer 3

あなたはこのように行うことができます：

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> 
    ); 

私はそれはあなたを助ける願っています:)

親切、