如何使用正常化終極版 - 表單字段部件

Question

我有一個關於終極版形式問題

https://redux-form.com/7.0.4/examples/normalizing/ - 這一個

我結合兩個輸入與字段部件，並且在每個這種輸入我想使用正常化來自Redux-Form的方法，我該怎麼做？

例子：

<Fields 
    names={[ 'first', 'last' ]} 
    component={this.renderFields} 
/> 

const renderFields = (fields) => (
<div> 
    <input {...fields.first.input}> 
    <input {...fields.first.input}> 
</div> 
) 

Answer 1

我認爲你必須手動運行正規化功能：

const renderFields = (fields) => { 
    const first = fields.first; 
    const onChangeFirst = (event) => { 
    const newValue = event.target.value; 
    // normalize is passed down as a prop as well 
    const normalizedValue = fields.normalize(newValue); 
    // pass the normalized value to the Redux-Form onChange 
    first.input.onChange(normalizedValue); 
    }; 

    const last = fields.last; 
    // do the equivalent thing for "last" 
    // const onChangeLast .... ... 

    return (
    <div> 
     <input {...first.input} onChange={ onChangeFirst }> 
     <input {...last.input} onChange={ onChangeLast } > 
    </div> 
); 
} 

那麼你可以使用它像

<Fields 
    names={ [ 'first', 'last' ] } 
    component={ this.renderFields } 
    normalize={ myNormalizeFunction } 
/> 

你可以看到一個工作JSFiddle demo here。