ReactJS：将参数提升几个级别？

Question

I want to upstream the key of the component on change. Ie, I write

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

However, in my case this.props.onChange also points in its turn to its props.onChange function. I've tried to define all the hierarchically "upper" assignments as onChange={this.props.onChange} as well as onChange={(e,key) => this.props.onChange(e,key)} , but nothing helps the fact that key is undefined when it comes to the actual function body.

Here's the full code of that what has to do with the peoblem:

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

...

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) {
    }
}

Answer 1

I'm not quite sure what you are trying to do here, but I've noticed that you are falling for a pretty common ReactJs pitfall which is that:

Keys serve as a hint to React but they don't get passed to your components. If you need the same value in your component, pass it explicitly as a prop with a different name

meaning that this.props.key will always be undefined . So, I'm afraid that all the instances in where you are using this.props.key are not going to behave as you expect...