How do I reset the defaultValue for a React input

Question

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.

Answer 1

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.

eg

 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

I've solved this by using both onBlur and onChange and only keeping track of the currently active input element in the state.

If there is a way to reset the module so that it re-displays the new default values then I'll mark that as correct.

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,
  });
}

In the render function:

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