代码之家 › 专栏 › 技术社区 › D2DN

如何将redux form的formValueSelector方法与自定义组件一起使用以显示另一个组件

redux-form react-redux redux reactjs

D2DN · 技术社区 · 6 年前

我尝试使用redux表单创建一个表单,当我单击custom按钮时,它会显示另一个输入。

我找到了简单组件(输入,复选框)的示例,但当我想对自定义组件使用相同的逻辑时,我的选择器未定义。

   <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);