如何在Redux中使用Normalize - 表单字段组件

Question

我有一个关于Redux Form的问题

https://redux-form.com/7.0.4/examples/normalizing/ - 这一个

我将两个输入与Fields组件组合在一起，在每个输入中我想使用Redux-Form中的Normalize方法，我该怎么做？

例：

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

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

Answer 1

我想你必须手动运行normalize函数：

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。

Answer 2

<Fields 
  names={ [ 'first', 'last' ] } 
  component={ this.renderFields }
  format={ (name, value) => {
    if(name === 'first') {
       //return something for [first value] like normalize function
    }
    //return something for [last value] like normalize function
  }}
/>