javascript - 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     
     }

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

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

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

我正在使用 Primereact slider组件

Answer 1

根据 Slider 的文档您正在使用的组件。 onChange 回调函数的参数是一个带有键 originalEvent: Slide event 的对象，值:新值。因此，要访问目标，您需要使用 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>
        )
    }
}