How to reset default value for React login

Question

I have a set of React input elements that have a default value. Values ​​are updated using the onBlur event.

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

I can't easily use onChange because it will cause premature repetition (the inputs contain the value of the display order, and premature repetition will move them).

I could create a repeating state, one for real values, which is updated only with onBlur, and the other for updating the value in the input element while editing it. That would be far from ideal. It would be much simpler just to reset the defaults.

Answer 1

I solved this using both onBlur and onChange and tracking only the active input element in state.

If there is a way to reset the module so that it re-displays the new default values, I mark this 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)} />
  );
})}

Answer 2

fooobar.com/questions/94698/..., , . , "" reset , 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" />

Hide result