javascript - 重置 React 中控件的默认值

Question

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

主应用容器、 Canvas 和工具栏都是类组件，具有生命周期管理。工具栏上的控件都是无状态的功能组件。最初这是一个 Backbone 应用程序，更改 Canvas 意味着销毁包含 Canvas 和控件的 View 并创建一个具有默认值的新 View 。然而，我很难用 React 轻松实现同样的目标。我的缩放控件是一个简单的功能组件，它呈现一个带有各种缩放百分比选项的选择控件:

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>
    )
  }
}

我要确保的是，每次重绘canvas组件时，控件的显示值都会重置为默认值100。如果不求助于 jQuery，我怎样才能实现这一目标呢？我知道key技巧，但这似乎是一个粗略的解决方案 - 我尝试过，视觉结果也不令人满意。

默认值不能真正建模为状态，因为它是应用程序的固定值。无论如何，缩放控件都是一个功能组件，没有自己的状态。其“状态”的唯一变化是用户交互的结果。

Answer 1

在 React 中有两种方法可以做到这一点。

使 Zoom 组件成为受控组件。将缩放值作为 props 传递，并使用 value 而不是 defaultValue。

<select value={props.value} onChange={props.handleZoomPct} />

在 Zoom 组件上使用 ref。当需要重置defaultValue时，使用ref重置该值。

reset() {
  this.selectRef.current.value = '100%';
}