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

Question

我尝试创建一个带有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);

Answer 1

最后，在阅读了更多注意事项后，我使用FieldArrays标记和formValueSelector()

解决了我的问题。