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

Answer 1

根据您正在使用的Slider组件的文档。 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中的name。

内部父组件：

e.target
子组件：

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