Question

我想为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显示空数据对象

Answer 1

我找到了解决方案

现在我的组件看起来：

// this way would throw exception if no result was found or more than 1 result
EMP e =(EMP) db.EMPs.Single(n => n.id == j);

// if no result was found, return null
EMP e =(EMP) db.EMPs.SingleOrDefault(n => n.id == j);

// if no result was found, throw exception. 
// if there are more than 1 result, return the first item
EMP e =(EMP) db.EMPs.First(n => n.id == j);

// if no result was found, return null. 
// if there are more than 1 result, return the first item
EMP e =(EMP) db.EMPs.FirstOrDefault(n => n.id == j);

// cast to list 
List<EMP> e =(EMP) db.EMPs.Where(n => n.id == j).ToList();
// then, select the first item via index:
return View(e[0]);

表单组件中的用法：

var Schema = mongoose.Schema;
var PeopleSchema = new Schema({
    externalModelType:{
        type: String
    },
    peopleType:{
        type: Schema.Types.ObjectId,
        refPath: 'externalModelType'
    }
})

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

Answer 2

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

这些字段具有name和value属性，可在Forms和redux-form中使用。

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

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

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

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

redux-form V6自定义组件

3 个答案: