如何重置 React 输入的默认值 [英] How do I reset the defaultValue for a React input

问题描述

我有一组设置了 defaultValue 的 React 输入元素.这些值使用 onBlur 事件更新.

我在页面上还有另一个操作来更新这些输入元素中的所有值.发生这种情况时，有没有办法强制反应以呈现新的默认值?

我不能轻易使用 onChange，因为它会触发过早的重新渲染(输入包含显示顺序值，过早的重新渲染会移动它们).

我可以创建一个重复的状态，一个用于仅使用 onBlur 更新的真实值，另一个用于在编辑时更新输入元素中的值.这远非理想.重置默认值会简单得多.

解决方案

如https://stackoverflow.com/a/中所述21750576/275501，您可以为渲染组件的外部元素分配一个键，由状态控制.这意味着你有一个开关"来完全重置组件，因为 React 认为一个新的键来表示一个全新的元素.

例如

class MyComponent 扩展 React.Component {构造函数(){极好的();this.state = {关键:Date.now(),计数器:0};}更新计数器(){this.setState( { 计数器: this.state.counter + 1 } );}updateCounterAndReset() {this.updateCounter();this.setState( { key: Date.now() } );}渲染(){ 返回(<div key={this.state.key}><p>输入默认值:<input type="text" defaultValue={Date.now()}/></p><p>计数器:{this.state.counter}<button onClick={this.updateCounter.bind(this )}>更新计数器</button><button onClick={this.updateCounterAndReset.bind( this )}>更新计数器和重置组件</button></p>

);}}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"/>

I have a set of React input elements that have a defaultValue set. The values are updated with an onBlur event.

I also have another action on the page that updates all values in these input elements. Is there a way to force react to render the new defaulValues when this happens?

I can't easily use onChange since it would trigger a premature rerender (The inputs contain a display order value and a premature rerender would move them).

I could create a duplicate state, one for the real values that is only updated with onBlur and one to update the value in the input element while it is being edited. This would be far from ideal. It would be so much simpler to just reset the default values.

解决方案

As mentioned in https://stackoverflow.com/a/21750576/275501, you can assign a key to the outer element of your rendered component, controlled by state. This means you have a "switch" to completely reset the component because React considers a new key to indicate an entirely new element.

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" />

这篇关于如何重置 React 输入的默认值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！