Question

给出一个基本组件和一个自定义的handleChange（）函数，“ id”的参数在App.js中来自哪里？我知道所有事件函数都将事件属性作为参数接收，但是“ id”从何而来？这是否意味着我在给定的基于类的组件中编写的所有自定义函数都将获得除事件参数之外的参数？

App.js组件

import React from "react"
import TodoItem from "./TodoItem"
import todosData from "./todosData"

class App extends React.Component {
    constructor() {
        super()
        this.state = {
            todos: todosData
        }
        this.handleChange = this.handleChange.bind(this)
    }

    handleChange(id) {

        console.log("Changed", id)
    }

    render() {
        const todoItems = this.state.todos.map(item => 
          <TodoItem 
            key={item.id} 
            item={item} 
            handleChange={this.handleChange}
          />)

        return (
            <div className="todo-list">
                {todoItems}
            </div>
        )    
    }
}

TodoItem.js组件

import React from "react"

function TodoItem(props) {
    return (
        <div className="todo-item">
            <input 
                type="checkbox" 
                checked={props.item.completed} 
                onChange={() => props.handleChange(props.item.id)}
            />
            <p>{props.item.text}</p>
        </div>
    )
}

export default TodoItem

todosData.js

const todosData = [
    {
        id: 1,
        text: "Take out the trash",
        completed: true
    },
    {
        id: 2,
        text: "Grocery shopping",
        completed: false
    },
    {
        id: 3,
        text: "Clean gecko tank",
        completed: false
    },
    {
        id: 4,
        text: "Mow lawn",
        completed: true
    },
    {
        id: 5,
        text: "Catch up on Arrested Development",
        completed: false
    }
]

export default todosData

Answer 1

给出一个基本组件和一个自定义的handleChange（）函数，“ id”的参数在App.js中来自哪里？

在这里，您将handleChange作为对TodoItem组件的支持：

<TodoItem key={item.id} item={item} handleChange={this.handleChange}/>

在这里您可以从TodoItem内部调用它：

onChange={() => props.handleChange(props.item.id)}

这是否意味着我在给定的基于类的组件中编写的所有自定义函数都将获得除事件参数之外的参数？

是的，您的自定义函数将在调用时接收传递给它的任何参数。

React：自定义函数参数

1 个答案: