重置React中控件的默认值

我有一个React应用程序,它由一个主“canvas”组件和一个工具栏组件组成,前者用于渲染第三方SVG,后者用于控制画布上的缩放和其他各种操作。用户可以使用下拉菜单更改画布的内容,当发生这种情况时,控件(缩放等)应重置为默认值。

function zoomPcntControl(props) {
  const zoomLevels = [10, 25, 50, 75, 100, 125, 150, 200, 400, 800, 1600, 2400, 3200];
  const options = zoomLevels.map((level, key) => {
    return (
      <option key={key}> {level+"%"} </option>
    );
  });
  render() {
    return (
      <div>
        <select id="zoom-list" defaultValue="100%" autoComplete="off" onChange={props.handleZoomPcnt}>
          {options}
        </select>
      </div>
    )
  }
}

我要确保的是,每次重画画布组件时,控件的显示值都会重置为默认值100。除了求助于jQuery,我如何才能做到这一点?我知道那件事 key 技巧,但这似乎是一个粗糙的解决方案-我尝试了,视觉效果也不令人满意。

默认值不能真正建模为state,因为它是应用程序的固定值。在任何情况下,变焦控制都是一个功能部件,没有自己的状态。其“状态”的唯一变化是用户交互的结果。