Question

我将onChange函数与另一个道具一起传递到了react组件中。在onChange函数中，我需要获取传递给组件的prop。我该怎么办？我正在考虑使用event.target，但不知道是否从event.target返回了道具。

背景：我正在尝试制作一个基本的ideaboard，现在只想基于文件中的数组创建几个inputtable文本框。组件Idea代表一个想法，它有两个文本输入区域。

function Idea(props){
    return(
        <div>
            <p>Date: {props.date}</p>
            <input 
                type = "text"
                value = {props.title}
                name = "title"
                placeholder = "title"
                onChange = {props.handleChange}
                />

            <textarea
                type = "text"
                value = {props.content}
                name = "content"
                placeholder = "content"
                onChange = {props.handleChange}
                />
        </div>)}

父组件Ideas将文本框的内容以状态存储为对象数组。数组中的每个元素都是一个对象，代表一个Idea组件的数据，并存储日期，标题和内容。

import ideasData from "./ideasData
class Ideas extends Component{
    constructor() {
        super()
        this.state = {
            ideas : ideasData
        }
        this.handleChange = this.handleChange.bind(this)
    }

Ideas，handleChange中的一个函数作为道具传递给每个渲染的Idea组件。它更新以Ideas状态存储的数组。例如，如果我在第三个想法的“标题”文本框中键入“事物”，则ideas[2].title应该成为“事物”。但是，这需要我从组件中检索“索引”属性，否则它将不知道应更新状态中数组的哪个元素。 “索引”是一个传递给每个Idea组件的道具。

    handleChange(event) {
        const {name,value} = event.target
        let index = ????????
        let curIdeas = this.state.ideas
        curIdeas[index][name] = value
        this.setState(curIdeas)
    }

Answer 1

渲染Idea时，您需要将索引作为道具传递。

this.state.ideas.map((idea, i) = > <Idea {...idea} index={i} />

然后在Idea内调用handleChange，其中index来自道具。

onChange = {(e) => props.handleChange(e, this.props.index}

并在index中获得handleChange

handleChange(event, index) {
    const {name,value} = event.target
    let index = index
    let curIdeas = this.state.ideas
    curIdeas[index][name] = value
    this.setState(curIdeas)
}

如何从onChange（）事件获取道具？

1 个答案: