我在redux-form
中制作了一些自定义表单,并想知道如何清除单选按钮。我知道你可以撤下重置支柱,但我不确定能否完成这项工作。我将用图片解释我的内容以及我想要它做什么。
这允许您选择最高或最低,然后您可以提交,它将为您提供一个已排序的数组。
问题在于,当我选择新类别时,前一类别仍然选择了单选按钮。例如,如果我转到name
并点击highest
或lowest
,则点击提交,它会提交两个值。我需要能够在填充新类别时清除该值。
我将在下面发布我的代码:
表单字段:
import React from 'react';
import PaginationField from './PaginationField';
import { Field } from 'redux-form';
function renderField(selectedField) {
switch (selectedField) {
case 'currency':
return (
<div style={{ display: 'flex' }}>
<h4>Currency:</h4>
<Field
key="currencyHigh"
component={PaginationField}
type="radio"
label="Highest"
name="currency"
value="currencyHigh"
/>
<Field
key="currencyLow"
component={PaginationField}
type="radio"
label="Lowest"
name="currency"
value="currencyLow"
/>
</div>
);
break;
case 'name':
return (
<div style={{ display: 'flex' }}>
<h4>Name:</h4>
<Field
key="nameHigh"
component={PaginationField}
type="radio"
label="Ascending"
name="name"
value="nameHigh"
/>
<Field
key="nameLow"
component={PaginationField}
type="radio"
label="Descending"
name="name"
value="nameLow"
/>
</div>
);
break;
case 'geolocation':
return (
<div style={{ display: 'flex' }}>
<h4>Geolocation:</h4>
<Field
key="geoClose"
component={PaginationField}
type="radio"
label="Nearest"
name="geolocation"
value="Nearest"
/>
<Field
key="geoFar"
component={PaginationField}
type="radio"
label="Farthest"
name="geolocation"
value="Furthest"
/>
</div>
);
break;
case 'category':
return (
<div style={{ display: 'flex' }}>
<h4>Category :</h4>
<Field
key="categoryHigh"
component={PaginationField}
type="radio"
label="A-Z"
name="category"
value="A-Z"
/>
<Field
key="categoryLow"
component={PaginationField}
type="radio"
label="Z-A"
name="category"
value="Z-A"
/>
</div>
);
break;
default:
return <div />;
break;
}
}
export default ({ selectedField }) =>
<div
style={{
width: '90%',
border: '1px solid #333',
background: '#f9f9f9',
padding: 16,
margin: 16,
}}
>
<h2 style={{ color: 'red' }}>
You must select only one sort option ({selectedField}) at a time. If you want to choose
another hit clear first.
</h2>
<h3 style={{ color: 'blue' }}>Choose as many filters as you want (checkboxes)</h3>
<div style={{ display: 'flex' }}>
<h4>Payment Options:</h4>
<Field key="sys" component={PaginationField} type="checkbox" label="SYS" name="sys" />
<Field
key="btc"
component={PaginationField}
type="checkbox"
value="btc"
label="BTC"
name="btc"
/>
<Field key="zec" component={PaginationField} type="checkbox" label="ZEC" name="zec" />
</div>
<hr />
{renderField(selectedField)}
</div>;
选择字段:
import React from 'react';
export default ({ input }) =>
<select {...input}>
<option value="">Select Category</option>
<option value="currency">Currency</option>
<option value="name">Name</option>
<option value="geolocation">Geolocation</option>
<option value="category">Category</option>
</select>;
表格:
import React, { Component } from 'react';
import * as actions from '../../redux/actions/sortActions.js';
import { connect } from 'react-redux';
import { reduxForm, Field } from 'redux-form';
import PaginationField from './PaginationField';
import SorterForm from './SorterForm';
import selectForm from './selectForm';
class Sorter extends Component {
constructor() {
super();
this.state = {
selectedField: '',
};
}
componentDidMount() {
// this.props.fetchOffers();
}
renderItems() {
return this.props.itemSorted.map((item, i) =>
<div key={i} style={{ border: '1px solid #ddd' }}>
<h3>
{item.title}
</h3>
<p>
price: {item.price} {item.currency}
</p>
<p>
payment options: {item.paymentoptions_display}
</p>
<p>
category: {item.category}
</p>
<p>
distanceFromUser: {item.distanceFromUser}
</p>
</div>,
);
}
submitSort(values) {
this.props.sortOffers(values);
}
filterChoice(event) {
this.setState({
selectedField: event.target.value,
});
}
render() {
const { handleSubmit, pristine, reset, submitting } = this.props;
return (
<div style={{ margin: '100px 20px 0px 20px' }}>
<form
onSubmit={handleSubmit(this.submitSort.bind(this))}
style={{
width: '100%',
border: '1px solid #333',
background: '#f9f9f9',
padding: 16,
margin: 16,
}}
>
<Field onChange={this.filterChoice.bind(this)} name="selectForm" component={selectForm} />
<SorterForm selectedField={this.state.selectedField} />
<button type="submit">Submit</button>
<button type="button" onClick={reset}>
Clear
</button>
</form>
{this.renderItems()}
</div>
);
}
}
function mapStateToProps(state) {
return {
itemSorted: state.sorter,
};
}
export default connect(mapStateToProps, actions)(
reduxForm({
form: 'sorter',
})(Sorter),
);
答案 0 :(得分:0)
使用radio
创建<Field />
元素时,
如果您通过以下道具,则默认情况下,收音机元素不会是selected
。
name=""
component={}
type="radio"
value=""