我有一组设置了 defaultValue 的 React 输入元素。这些值通过 onBlur 事件更新。
我还在页面上执行了另一个操作，用于更新这些输入元素中的所有值。发生这种情况时，有没有办法强制做出反应以呈现新的默认值？
我无法轻松使用 onChange，因为它会触发过早重新渲染（输入包含显示顺序值，过早重新渲染会移动它们）。
我可以创建一个重复状态，一个用于仅使用 onBlur 更新的实际值，另一个用于在编辑输入元素时更新该值。这远非理想。只需重置默认值就会简单得多。
正如中提到的https://stackoverflow.com/a/21750576/275501，您可以将一个键分配给渲染组件的外部元素，由状态控制。这意味着你有一个“开关”来完全重置组件，因为 React 认为一个新的键来指示一个全新的元素。
e.g.
class MyComponent extends React.Component {
constructor() {
super();
this.state = {
key: Date.now(),
counter: 0
};
}
updateCounter() {
this.setState( { counter: this.state.counter + 1 } );
}
updateCounterAndReset() {
this.updateCounter();
this.setState( { key: Date.now() } );
}
render() { return (
<div key={this.state.key}>
<p>
Input with default value:
<input type="text" defaultValue={Date.now()} />
</p>
<p>
Counter: {this.state.counter}
<button onClick={this.updateCounter.bind( this )}>Update counter</button>
<button onClick={this.updateCounterAndReset.bind( this )}>Update counter AND reset component</button>
</p>
</div>
); }
}
ReactDOM.render( <MyComponent />, document.querySelector( "#container" ) );
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container" />
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
