Реагировать на обратный вызов вложенного массива setState - PullRequest
Новая
       11

Реагировать на обратный вызов вложенного массива setState

0 голосов
/ 21 апреля 2020

У меня есть родительский компонент с объектом, который содержит несколько вложенных массивов, представляющих диапазон: 

    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. У меня возникают проблемы при создании метода, который может обрабатывать все массивы в моем объекте. Я добавил пример кода, который я пробовал, но оба моих примера имеют некоторый fl aws.

Я использую Primereact slider component

1 Ответ

1 голос
/ 21 апреля 2020

Согласно документации 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>
        )
    }
}
...