如何重置 React 输入的默认值

Question

我有一组具有 defaultValue 集的 React 输入元素。这些值使用 onBlur 事件更新。

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

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

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

Answer 1

如/sf/answers/1522540351/ 中所述，您可以为渲染组件的外部元素分配一个键，由状态控制。这意味着你有一个“开关”来完全重置组件，因为 React 认为一个新键来指示一个全新的元素。

例如

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

Answer 2

我通过使用 onBlur 和 onChange 并仅跟踪状态中当前活动的输入元素解决了这个问题。

如果有一种方法可以重置模块，以便它重新显示新的默认值，那么我会将其标记为正确。

state = {
  inFocusIndex: null,
  inFocusDisplayOrder: 0,
};


onOrderBlur() {
  const productRow = this.props.products[this.state.inFocusIndex];
  const oldDisplayORder = productRow.displayOrder;
  // This can change all the display order values in the products array
  this.props.updateDisplayOrder(
    this.props.groupId,
    productRow.productGroupLinkId,
    oldDisplayORder,
    this.state.inFocusDisplayOrder
  );
  this.setState({ inFocusIndex: null });
}

onOrderChanged(index, event) {
  this.setState({
    inFocusIndex: index,
    inFocusDisplayOrder: event.target.value,
  });
}

在渲染函数中：

{this.props.products.map((row, index) => {
  return (
    <input
      type="text"
      value={index === this.state.inFocusIndex ? this.state.inFocusDisplayOrder : row.displayOrder}
      className={styles.displayOrder}
      onChange={this.onOrderChanged.bind(this, index)}
      onBlur={this.onOrderBlur.bind(this)} />
  );
})}