從<code>react-intl</code><a href="https://github.com/yahoo/react-intl/issues/162" rel="nofollow">v2</a>通過改變反應 - 國際包裝道具

Question

我包裝我的IntlProvider內的應用程序切換語言時，我的終極版形式被重新初始化，這樣的：

<IntlProvider locale={this.props.lang} messages={this.props.messages}> 

我有我的react-form形式在樹下。一切都很好。

但是，如果我開始填寫表格，並且我決定更改UI的語言（通過聽取將通過我的redux商店更新我的lang和messages道具的操作），表單正在重置： -/

我看到操作redux-form/INITIALIZE在lang更改時被觸發。

即使我通過destroyOnUnmount: false到reduxForm()也會發生這種情況。

它沒有發生與不受控制的表單域。

任何想法？

我的代碼：App.js + Register form

Answer 1

嗯......你改變了initialValues道具，所以它的初始化表單數據。 initialValues旨在用於來自要編輯的服務器的規範數據（例如加載的記錄），而不是真正用於從組件外部更新各個表單值。

也許你可以使用plugin() API來注意語言改變操作（是否通過Redux更改？）並更新表單中的lang值？

Answer 2

當我們將react-relay與redux-form合併時，我們遇到了同樣的問題。解決方案很簡單：我們在表單掛載時初始化表單。

compose(
    createContainer({ 
    fragments: { 
     viewer:() => Relay.QL` 
     fragment on User { 
      nickname 
      email 
     } 
     ` 
    } 
    }), 
    reduxForm({ 
    form: "user", 
    fields: ["nickname", "email"], 
    }) 
)(
    class UserForm extends Component { 
    componentWillMount() { 
     this.props.initializeForm(this.props.viewer) 
    } 

    render() { 
     // Same as before 
    } 
    } 
)