如何在 Redux 中使用 Normalize - Form Fields 组件

Question

我对 Redux 表单有疑问

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

我认为您必须手动运行规范化函数：

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
  }}
/>

如何在 Redux 中使用 Normalize - Form Fields 组件

How to use Normalize in Redux - Form Fields component

reactjs

redux-form