反应 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 将输入发送到我的父组件。我无法创建一个可以处理对象中所有数组的方法。 我添加了一些我尝试过的示例代码，但我的两个示例都有一些缺陷。

我正在使用 Primereact slider 组件

Answer 1

根据您正在使用的Slider 组件的文档。 onChange 回调函数的参数是一个带有键 originalEvent: Slide event 和 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>
        )
    }
}