React Component Design - State Initializers

發佈時間

延續Toggle的例子，有些時候我們希望將元件的state還原回初始state，與其用setState將on的狀態設成false，到不如利用下列的技巧

class Toggle extends React.Component {
  static defaultProps = {
    initialOn: false,
    onReset: () => {},
  }

  initialState = { on: this.props.initialOn }

  state = this.initialState

  reset = () =>
    this.setState(this.initialState, () =>
      this.props.onReset(this.state.on),
    )

  getStateAndHelpers() {
    return {
      on: this.state.on,
      toggle: this.toggle,
      reset: this.reset,
      getTogglerProps: this.getTogglerProps,
    }
  }
  // same as before
}

function Usage({
  initialOn = false,
  onToggle = (...args) => console.log('onToggle', ...args),
  onReset = (...args) => console.log('onReset', ...args),
}) {
  return (
    <Toggle
      initialOn={initialOn}
      onToggle={onToggle}
      onReset={onReset}
    >
      {({ getTogglerProps, on, reset }) => (
        <div>
          <Switch {...getTogglerProps({on})} />
          <hr />
          <button onClick={() => reset()}>Reset</button>
        </div>
      )}
    </Toggle>
  )
}