React输入是只读或不显示我的defaultValue

Question

当我执行以下操作时，输入字段将显示我的值BUT将是readonly：

<input id="topbar-zoominput" value={zoomPercent} onChange={(e) => console.debug('TopBar -> handleManualZoom', e)} />

当我按照以下方式执行此操作时，它不会只读取，但不会显示我的defaultValue：

<input id="topbar-zoominput" defaultValue={zoomPercent} onChange={(e) => console.debug('TopBar -> handleManualZoom', e)} />

我知道readonly，value，defaultValue，onChange，因为我觉得它应该有效。

我的目标是让它可写，并显示我的默认值。

Answer 1

value={zoomPercent}的第一个案例（推荐的controlled component）：

• 您必须将zoomPercent置于组件状态：value={this.state.zoomPercent}
• 然后道具onChange应修改此状态以修改输入值：onChange={(e) => this.setState({zoomPercent:e.target.value});

defaultValue={zoomPercent}的第二种情况：

• 在first rendering处，zoomPercent为undefined，这就是永远不会设置默认值的原因。
• 或者（可能会尝试），您应该type="text" ot <input>代码。