обновить свойство корневого компонента от дочернего компонента с помощью приставки - PullRequest
Новая
       21

обновить свойство корневого компонента от дочернего компонента с помощью приставки

0 голосов
/ 24 марта 2019

У меня есть два компонента: корневой компонент, содержащий список данных.данные отображаются из базы данных.второй компонент - DateRangepicker, который помогает выбирать даты, чтобы мы могли фильтровать данные компонента корня. 

    class Child extends React.Component {
    pickDateRange = (e: React.FormEvent<HTMLFormElement>) => {
    // getting data successufly from firebase
    // this is where I get the error trying to set the root component's props
    this.props.data = data
    }
    render() {
    return (
            <div>
                <form onSubmit={this.pickDateRange} className={classes.container} noValidate>
                    <TextField
                        id="datestart"
                        label="Starting Date"
                        type="date"
                        onChange={this.handleStartDate}                        
                    />
                    <TextField
                        id="dateend"
                        label="Ending Date"
                        type="date"
                        onChange={this.handleEndDate}
                        className={classes.textField}                        
                    />
                    <Button
                        type="submit"
                    >
                        Filter
                </Button>
                </form>                
            </div>
        );
    }}

class Parent extends React.Component {
       render() {
                 return (<div> <ChildB data={this.state.data}/></div>)
}}

1 Ответ

0 голосов
/ 24 марта 2019

Вы не можете изменять реквизиты из дочернего компонента, передавать обратный вызов от родителя через реквизиты дочернему компоненту, использовать состояние в дочернем компоненте или использовать ваше хранилище с избыточностью.

Что ж, это легко исправитьбыть: 

this.props.changeData(data)

с родительским рендером: 

render() {
   return (<div> <ChildB data={this.state.data} changeData={(data)=>{this.setState({data: data})}/></div>)
}

но это зависит от ситуации, и вы не хотите, чтобы таким образом устанавливалось состояние родителей для ребенка.

...