状態をES6のデフォルトの小道具に戻す

Question

次のES6構文を使用して、リセットが呼ばれたときに状態をデフォルトの状態に戻す最善の方法は何ですか？

reset() { 
    if (this.mounted) { 
    this.setState(()=> { 
     const newState = { 
     anchorStandards: {writing: [], reading: []}, 
     gradeLevels: {gradeLevels: []} 
     } 
     this.props.onFilterChange(newState) 
     return newState 
    }) 
    } 
} 

しかしがある場合、私は疑問に思って：または別のソリューションをシームレスに

class XYZ extends React.Component { 
    constructor() { 
    super(), 
    this.state = { 
    ... 
    } 
    } 

    reset() { 
    //I need to revert to default props here 
    } 
} 

XYZ.propTypes = { 
    ... 
} 

XYZ.defaultProps = { 
    ... 
} 

export default XYZ 

技術的に私は次のようにリセットを実装することができます（私はforceUpdateは良い選択肢ではないことを読んで）コンポーネントを再ロードされますこれを呼び出す方法.defaultPros

Answer 1

getDefaultState(props)関数を実装し、constructor(props)とreset()の両方で呼び出します。例えば

：

getDefaultState(props) { 
    return { importantState: props.importantState } 
} 

constructor(props) { 
    this.state = this.getDefaultState(props) 
} 

reset() { 
    this.setState(this.getDefaultState(this.props)) 
} 

このアプローチでは、親コンポーネントは何を知っている必要はありません。また、関連する小道具や初期状態を決定するコードは一度だけ書かれています。

Answer 2

この簡単な方法をお試しください。

https://jsfiddle.net/pablodarde/5fhdLcey/

親要素

class Main extends React.Component { 
    constructor() { 
    super(); 
    this.state = { 
     name: "Pablo", 
    }; 
    this.reset = this.reset.bind(this); 
    } 

    reset() { 
    this.setState({ 
     name: undefined, 
    }); 
    } 

    render() { 
    return(
     <div> 
     <HelloWidget name={this.state.name} reset={this.reset} /> 
     </div> 
    ); 
    } 
}; 

子要素

class HelloWidget extends React.Component { 
    constructor() { 
    super(); 
    } 

    render() { 
    return(
     <div> 
     <h2>{this.props.name}</h2> 
     <button onClick={this.props.reset} >Reset</button> 
     </div> 
    ); 
    } 
} 

HelloWidget.propTypes = { 
    name: React.PropTypes.string, 
    reset: React.PropTypes.func, 
} 

HelloWidget.defaultProps = { 
    name: "Friend", 
}