Как сбросить значение по умолчанию для ввода React

У меня есть набор элементов ввода React, которые имеют набор defaultValue. Значения обновляются с помощью события onBlur.

У меня также есть другое действие на странице, которое обновляет все значения в этих элементах ввода. Есть ли способ заставить реагировать на рендеринг новых значений по умолчанию, когда это происходит?

Я не могу легко использовать onChange, так как это вызовет преждевременную визуализацию (входные данные содержат значение порядка отображения, а преждевременная визуализация будет перемещать их).

Я мог бы создать дублированное состояние, одно для реальных значений, которое обновляется только с помощью onBlur, и другое для обновления значения в элементе ввода во время его редактирования. Это было бы далеко от идеала. Было бы намного проще просто сбросить значения по умолчанию.

 Yuya21 июн. 2016 г., 16:04
Я не уверен, как ваши события обрабатываются, но еслиonChange не легко использовать, тогда что-то не так со структурой вашего кода.
 Damien Leroux21 июн. 2016 г., 15:52
Почему бы не использовать «значение» вместоdefaultValue ? Вы сможете контролировать значение вашего ввода. С помощьюdefaultValue это плохая практика, потому что вы получаетенеуправляемый компонент
 SystemicPlural21 июн. 2016 г., 15:55
@DamienLeroux Я объяснил это в вопросе. Изменение значения немедленно меняет порядок рендеринга.
 erichardson3021 июн. 2016 г., 16:01
@SystemicPlural, но, как указано в документации, defaultValue следует использовать только для начального рендеринга. После первоначального рендеринга значение должно использоваться и обновляться как контролируемый компонент.
 Damien Leroux21 июн. 2016 г., 16:02
Вы объясняете, что не можете позвонитьonChange, не то, что вы не можете использовать собственностьvalue, Зачем использоватьvalue вместоdefaultValue запускает рендеринг? В противном случае, альтернативой будет сброс значения входного DOM с помощью jQuery.value()

Ответы на вопрос(2)

https://stackoverflow.com/a/21750576/275501Вы можете назначить ключ внешнему элементу визуализируемого компонента, контролируемого состоянием. Это означает, что у вас есть «переключатель» для полного сброса компонента, потому что 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" />

используя 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)} />
  );
})}

Ваш ответ на вопрос