React setState嵌套数组回调

Question

我有一个带有对象的父组件，该对象包含一些表示范围的嵌套数组：

class ParentComponent extends React.Component {
constructor() {
super();
this.state = {
filters: {
rangeArray1: [0, 2000],
rangeArray2: [0, 5000]
// and many other similar nested arrays
}
} 
}
//this gives TypeError: Cannot read property 'name' of undefined
//it works if there were nested objects instead of arrays
handleFilterChange = (e) => {
this.setState({
filters: {
...this.state.filters,
[e.target.name]: e.target.value,
}
})
}
//this works, but I need a method that handles all the arrays
handleFilterChange = (e) => {
this.setState({
filters: {
...this.state.filters,
rangeArray1: e.value,
}
})
}
//render method omitted     
}

我还有一个嵌套更深的子组件，它使用范围滑块处理按范围过滤：

class GrandchildComponent extends React.Component {
handleFilterChange = e => {
this.props.handleFilterChange && this.props.handleFilterChange(e)
};
render() {
return (
<div>
<p>Range1: {this.props.filters.rangeArray1[0]} - {this.props.filters.rangeArray1[1]}</p>
<Slider id="rangeArray1"
value={this.props.filters.rangeArray1}
name="rangeArray1"
onChange={this.handleFilterChange}/>
<p>Range2: {this.props.filters.rangeArray2[0]} - {this.props.filters.rangeArray2[1]}</p>
<Slider id="rangeArray2"
value={this.props.filters.rangeArray2}
name="rangeArray2"
onChange={this.handleFilterChange}/>
//and many other similar sliders
</div>
)
}
}

我遇到的情况是，用户使用范围滑块过滤一些数据，而我正试图使用回调方法handleFilterChange将输入发送到我的父组件。我在创建一个可以处理对象中所有数组的方法时遇到了问题。我添加了一些我尝试过的示例代码，但我的两个示例都有一些缺陷。

我正在使用Primreact滑块组件

Answer 1

根据您正在使用的Slider组件的文档。CCD_ 3回调函数的参数是具有键CCD_value: New value。因此，要访问目标，您需要使用event.originalEvent.target。

所以这样改变你的功能：

handleFilterChange = (e) => {
this.setState({
filters: {
...this.state.filters,
[e.originalEvent.target.name]: e.value,
}
})
}

另一种方法是，如果您不想使用e.target，那么您可以直接将其传递给函数，而不是使用e.target中的name

内部父组件：

handleFilterChange = (sliderName, value) => {
this.setState({
filters: {
...this.state.filters,
[sliderName]: value,
}
})
}

子组件：

class GrandchildComponent extends React.Component {
handleFilterChange = (name, value) => {
this.props.handleFilterChange && this.props.handleFilterChange(name, value)
};
render() {
return (
<div>
<p>Range1: {this.props.filters.rangeArray1[0]} - {this.props.filters.rangeArray1[1]}</p>
<Slider id="rangeArray1"
value={this.props.filters.rangeArray1}
onChange={(e) => this.handleFilterChange(
'rangeArray1', e.value
)}
/>
//and many other similar sliders
</div>
)
}
}