Javascript ReactJS：将参数提升几级？

我想把组件的键放在变更的上游。也就是说，我写作

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

然而，在我的例子中，

这个.props.onChange

也指向它的

props.onChange

函数。我试图将所有层次结构上的“上层”赋值定义为

onChange={this.props.onChange}

以及

onChange={（e，key）=>this.props.onChange（e，key）}

，但对于实际函数体

key

是未定义的这一事实毫无帮助

以下是与People相关的完整代码：

handleValueChange = (e, key) => {
    console.log('Event was on ' + key);
    let currElemData = this.state.currentElementsData.slice();
    currElemData[key] = {value: e.target.value};
    this.setState({currentElementsData: currElemData});
};
addFilter = () => {
    let activeFiltersNow = this.state.activeFilterElements.slice();
    activeFiltersNow.push(<Filter key={this.state.filterCounter} onSelect={(e, key) => this.handleReferenceSelection(e, key)}
                                  onChange={(e,key) =>this.handleValueChange(e, key)}/>);
    let currElemData = this.state.currentElementsData.slice();
    currElemData.push(InitialHelper.getInitialFilterData());
    this.setState({activeFilterElements: activeFiltersNow, currentElementsData: currElemData, filterCounter: this.state.filterCounter++});
};

handleValueChange=（e，键）=>{
日志（'事件在'+键上）；
让currElemData=this.state.currentElementsData.slice（）；
currElemData[key]={value:e.target.value}；
this.setState（{currentElementsData:currentElemData}）；
};
addFilter=（）=>{
让activeFiltersNow=this.state.activeFilterElements.slice（）；
activeFiltersNow.push（this.handleReferenceSelection（e，key）}
onChange={（e，key）=>this.handleValueChange（e，key）}/>）；
让currElemData=this.state.currentElementsData.slice（）；
currElemData.push（InitialHelper.getInitialFilterData（））；
this.setState（{activeFilterElements:activeFiltersNow，currentElementsData:currElemData，filterCounter:this.state.filterCounter++}）；
};

类过滤器扩展组件{
render（）{
返回
{this.props.isFirst？''：}
this.props.onSelect（e，key）}key={this.props.key}/>
this.props.onChange（e，key）}key={this.props.key}/>
}
}

class FilterValue扩展组件{
render（）{
返回this.props.onChange（e，this.props.key）}key={this.props.key}/>
}
建议（参考）{
}
}

我不太确定您在这里想做什么，但我注意到您正陷入一个非常常见的陷阱，即：

钥匙作为反应的提示，但不会传递给您的用户 组件。如果组件中需要相同的值，请传递它 显式地作为具有不同名称的道具

---

这意味着

此.props.key

将始终是

未定义的

。因此，我担心您正在使用

this.props.key

的所有实例都不会像您预期的那样运行…

噢，哇，这会有所帮助，谢谢！我基本上想要的只是以某种方式识别列表中的元素，以便上面的组件相应地更改其状态（即，如果ListItem 2nd已更改，则恰好更改list.state的数组字段中的第二个元素）

class Filter extends Component {
    render() {
        return <div className="filterContainer">
            {this.props.isFirst? '':<FilterPrefix />}
            <FilterReference onSelect={(e,key) => this.props.onSelect(e,key)} key={this.props.key}/>
            <FilterAssignment />
            <FilterValue onChange={(e,key) => this.props.onChange(e,key)} key={this.props.key}/>
            <DeleteFilterButton />
        </div>
    }
}

class FilterValue extends Component{
    render() {
        return <input onChange={(e) => this.props.onChange(e,this.props.key)} key={this.props.key}/>
    }
    loadSuggestions(reference) {
    }
}