Question

我正在关注本教程React Tutorial

这是事情：我从create-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

你的道具名为＆＃34; createtask＆＃34;。您应该将您的prop名称更改为createTask（而不是更改对this.props.createtask的引用）。

Answer 2

您可以这样做：

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

我希望它可以帮到你:)

亲切的，

Answer 3

原因是，您将function中的props传递给另一个密钥，并使用不同的密钥使用内部子项。

实际功能名称：createTask

按键传递道具：createtask

使用内部儿童：createTask

因此请使用this.props.createtask()代替this.props.createTask()

this.props.createTask未定义

3 个答案: