redux表单V6自定义组件
redux表单V6自定义组件
提问于 2017-03-01 08:50:48
我想为redux表单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显示空数据对象
回答 3
Stack Overflow用户
发布于 2017-03-01 12:41:51
我找到了解决办法
现在，我的组件看起来：
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'}]} />我找到了这一讨论，这给了我一些想法
Stack Overflow用户
发布于 2017-03-01 09:42:43
你这样做的方式并不是还原形式的工作方式。<Field />组件是<input />、<textarea />等各种html表单字段的包装器。
这些字段具有一个name和value属性，用于窗体和redux。
您正在呈现<a />，这是简单的链接，因此redux无法获取/设置它们的值。
要从这些链接中获取值，您可能需要使用一个隐藏字段，当单击该链接时，该字段将被更新。
Stack Overflow用户
发布于 2018-05-24 13:39:17
在参考了下面的链接后，我有了一些想法。
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} /> }} />
在此之后，我能够获得自定义组件的值以及表单中的其他字段值。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42527132
复制相关文章
相似问题
腾讯云开发者
