如何在自定义组件中使用 redux-form 的 formValueSelector 方法来显示另一个组件答案

【问题标题】：How to use the method formValueSelector of redux-form with a custom component to display an another component如何在自定义组件中使用 redux-form 的 formValueSelector 方法来显示另一个组件
【发布时间】：2018-04-03 19:24:42
【问题描述】：

我尝试使用 redux-form 创建一个表单，当我单击自定义按钮时会显示另一个输入。

我找到了带有简单组件（输入、复选框）的示例，但当我想对自定义组件使用相同的逻辑时，我的选择器未定义。

   <Field
       name="addNumberPhone"
       id="addNumberPhone"
       component={ renderButtonAddNumberPhone }
       label='Add new label'
       type="checkbox"
   />
   { addNumberPhoneValue &&
       <div>
          display something
       </div>
   }

我的自定义组件渲染：

const renderButtonAddNumberPhone = ({ input , label , name , meta: { touched , error } }) => (
   <button id='button-add-number-phone' className='button-add-number-phone' onClick={ (e) => {
      e.preventDefault();
   } }>
      <p><Icon name="plus" size={ 10 } fill="blue"/> { label }
      </p>
   </button>
)

以及我对方法formValueSelector的配置：

const selector = formValueSelector('initializeFromState');
SampleForm = connect(state => {
    const addNumberPhoneValue = selector(state , 'addNumberPhone');    
    return {
        addNumberPhoneValue ,
    }
})(SampleForm);

【问题讨论】：

您希望addNumberPhone 具有什么价值？ renderButtonAddNumberPhone 组件只是一个按钮，它没有 onChange 事件和任何值..
在renderButtonAddNumberPhone内的onClick函数中它应该做什么？如果你取输入值并且你想更新redux形式的值，你需要使用input.onChange(newValue)

标签： reactjs redux react-redux redux-form

【解决方案1】：

最后，在仔细阅读了 redux-form 的文档后，我使用FieldArrays 标签和formValueSelector() 解决了我的问题

【讨论】：

因为通过更仔细地阅读 redux-form 文档，我在 fields 数组上找到了满足我需求的文档。我添加了链接，以便与我有同样问题的人。不需要代码，因为文档的解释很清楚。