Question

我有一个React应用程序，它包含一个主要的“画布”组件（用于渲染第3方SVG）和一个工具栏组件，该组件用于控制画布上的缩放和其他各种操作。用户可以使用下拉菜单更改画布的内容，并且在发生这种情况时，控件（缩放等）应重置为默认设置。

主应用程序容器，画布和工具栏都是具有生命周期管理的类组件。工具栏上的控件都是无状态功能组件。最初，这是Backbone应用程序，更改画布意味着破坏包含画布和控件的视图，并创建一个具有默认值的新视图。但是，我正在努力通过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>
    )
  }
}

我要确保的是，每次重新绘制画布组件时，控件的显示值都重置为默认值100。如果不借助jQuery，我该如何实现呢？我知道key的技巧，但这似乎是一个粗略的解决方案-我尝试过，视觉效果也不令人满意。

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

Answer 1

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

使“缩放”组件为受控组件。传递缩放值作为道具，并使用值代替defaultValue。

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

在“缩放”组件上使用ref。当需要重置defaultValue时，请使用ref重置该值。

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

在React

1 个答案: