redux-form V6 自定义组件答案

【问题标题】：redux-form V6 custom componentredux-form V6 自定义组件
【发布时间】：2017-03-01 08:50:48
【问题描述】：

我想为 redux-form V6 创建自定义组件。它看起来像按钮切换器。

组件

import React, { Component } from 'react';

export default class ButtonSwitcher extends Component{
// props.buttons [{text: "Btn Text", value: "BtnValue"}]
  render (){
    return (
      <div className="btn-group" style={{verticalAlign: 'top'}}>
        {this.props.buttons.map((button, index)=>(
          <a href="#" key={index} onClick={this.props.onChange} className={(this.props.value === button.value) ? 'active btn btn-default' : 'btn btn-default'}>{button.text}</a>
        ))}
      </div>
    );
  }
}

我在我的表单中使用这个组件：

const renderButtonSwitcher = props => {
  return (
    <ButtonSwitcher value={props.input.value} onChange={props.input.onChange} buttons={props.data} />
  )
};

<Field name="PODType" component={renderButtonSwitcher} data={[{text: '%', value: 'percent'}, {text: '$', value: 'amount'}]} />

如何获得选定的按钮值？我在 redux-form V6 中找不到任何高级示例

onSubmit(data) {
  console.log("onSubmit", data);
}

onSubmit 显示空数据对象

【问题讨论】：

标签： reactjs redux-form

【解决方案1】：

我找到了解决办法

现在我的组件看起来：

import React, { Component } from 'react';

export default class ButtonSwitcher extends Component{
  // props.buttons [{text: "Btn Text", value: "BtnValue"}]

  onClick(value){
    this.props.onChange(value);
  }

  render (){
    return (
      <div className="btn-group" style={{verticalAlign: 'top'}}>
        {this.props.buttons.map((button, index)=>(
          <a href="#" key={index} onClick={this.onClick.bind(this, button.value)} className={(this.props.value === button.value) ? 'active btn btn-default' : 'btn btn-default'}>{button.text}</a>
        ))}
      </div>
    );
  }
}

在表单组件中的使用：

const renderButtonSwitcher = props => {
      return (
        <ButtonSwitcher {...props.input} buttons={props.data} />
      )
    };

<Field name="PODType" component={renderButtonSwitcher} data={[{text: '%', value: 'percent'}, {text: '₽', value: 'amount'}]} />

我找到了this discussion，这给了我一些想法

【讨论】：

【解决方案2】：

你这样做的方式不是 redux-form 的工作方式。 <Field /> 组件是所有各种 html 表单字段（如 <input />、<textarea /> 等）的包装器。

这些字段有一个 name 和 value 属性，用于 Forms 和 redux-form。

您正在渲染 <a />，它们是简单的链接，因此 redux-form 无法获取/设置它们的值。

要从这些链接中获取值，您需要解决问题，可能使用隐藏字段，当点击此类链接时，该隐藏字段会更新。

【讨论】：

【解决方案3】：

参考下面的链接后，我有了一些想法。

https://redux-form.com/7.3.0/docs/faq/customcomponent.md/

我找到了如下解决方法：

<Field name="customCompValue" component={props => { props.input.onChange(newValueOfCustomComponent) return <MyCustomComponent someProp={props.input.value} /> }} />

在此之后，我能够获取自定义组件的值以及表单中的其他字段值。

【讨论】：