javascript - 如何清除 ReduxForm 中的单选按钮？

Question

我在 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),
);

Answer 1

当您创建radio时元素使用 <Field /> ,

如果你传递以下属性，radio元素将不会是selected默认情况下。

name="" 

component={} 

type="radio" 

value=""