Question

我想在变化时上游组件的键。即，我写了

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

但是，在我的情况下，this.props.onChange也指向其props.onChange函数。我试图定义所有层次结构＆＃34; upper＆＃34;作为onChange={this.props.onChange}以及onChange={(e,key) => this.props.onChange(e,key)}的作业，但是当涉及到实际的函数体时，key未定义的事实没有任何帮助。

以下是与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

我不太确定你在这里要做什么，但我注意到你正在为一个非常普遍的ReactJs陷阱而堕落：

密钥用作React的提示，但它们不会传递给您组件。如果组件中需要相同的值，请传递它明确地作为具有不同名称的道具

意味着this.props.key始终为undefined。所以，我担心您使用this.props.key的所有实例都不会像您期望的那样......

ReactJS：将参数提升几级？

1 个答案: