React入力のdefaultValueをリセットするには

Question

私は、defaultValueが設定されたReact入力要素のセットを持っています。値はonBlurイベントで更新されます。

これらの入力要素のすべての値を更新する別のアクションもページにあります。これが起こったときに新しいdefaulValuesをレンダリングするように強制する方法はありますか？

私はonChangeを使いこなすことができません。これは早すぎる再レンダリングをトリガーするためです（入力には表示順序の値が含まれており、時期尚早の再レンダリングによってそれらが移動するため）。

重複した状態を作成することができます.1つはonBlurでのみ更新される実際の値であり、もう1つは編集中に入力要素の値を更新することです。これは理想から遠いでしょう。デフォルト値をリセットするほうがはるかに簡単です。

Answer 1

これは、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)} /> 
); 
})}