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，那么可以直接将其传递给函数，而不必使用name中的e.target

内部父级组件：

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

反应setState嵌套数组回调

1 个答案: