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

我在

redux表单

中做了一点自定义表单，想知道如何清除单选按钮。我知道你可以把重置道具拔下来，但我不确定这是否能完成工作。我会用图片解释我所拥有的以及我想要它做什么

我有一个表单，可以让您选择要排序的类别。

选择所选类别后，它会在表单下方弹出：

这允许你选择最高或最低，然后你可以提交，它会给你一个排序数组

问题是，当我选择一个新类别时，上一个类别仍然选择了单选按钮。例如，如果我转到

name

并单击

highest

或

lower

，然后点击submit，它将提交两个值。我需要能够在填充新类别时清除该值

我将在下面发布我的代码：

表单字段：

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>;

从“React”导入React；
从“/PaginationField”导入分页字段；
从'redux form'导入{Field}；
函数渲染字段（selectedField）{
开关（selectedField）{
“货币”一案：
返回(
货币：
);
打破
案例“名称”：
返回(
姓名：
);
打破
“地理定位”案例：
返回(
地理位置：
);
打破
个案‘类别’：
返回(
类别：
);
打破
违约：
返回；
打破
}
}
导出默认值（{selectedField}）=>
一次只能选择一个排序选项（{selectedField}）。如果你想选择
又一次击中第一个目标。
选择所需数量的过滤器（复选框）
付款选择：

{renderField（selectedField）}
;

选择字段：

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

从“React”导入React；
导出默认值（{input}）=>
选择类别
通货
名称
地理定位
类别
;

表格：

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

import React，{Component}来自'React'；
从“../../redux/actions/sortActions.js”导入*作为操作；
从'react redux'导入{connect}；
从'redux form'导入{reduxForm，Field}；
从“/PaginationField”导入分页字段；
从“./SorterForm”导入SorterForm；
从“/selectForm”导入selectForm；
类分类器扩展组件{
构造函数（）{
超级（）；
此.state={
selectedField:“”，
};
}
componentDidMount（）{
//this.props.fetchOffers（）；
}
renderItems（）{
返回此.props.itemsordered.map（（项目，i）=>
{item.title}

价格：{item.price}{item.currency}


付款选项：{item.paymentoptions_display}


类别：{item.category}


distanceFromUser:{item.distanceFromUser}

,
);
}
提交排序（值）{
这个.props.sortOffers（值）；
}
过滤器选择（事件）{
这是我的国家({
selectedField:event.target.value，
});
}
render（）{
const{handleSubmit，pristine，reset，submiting}=this.props；
返回(
提交
清楚的
{this.renderItems（）}
);
}
}
函数MapStateTops（状态）{
返回{
itemSorted:state.sorter，
};
}
导出默认连接（MapStateTrops、操作）(
红肿({
表格：'分拣机'，
})（分拣机），
);

当您使用

创建

无线电

元素时

如果您通过以下道具，默认情况下将不会选择无线电元素

name="" 

component={} 

type="radio" 

value=""

---

使用

创建

无线电
元素时

如果您通过以下道具，默认情况下将不会选择无线电元素

name="" 

component={} 

type="radio" 

value=""

看一看，我已经看了这个，但它并没有真正告诉你如何在提交后清除单选按钮，但只有当我直接点击清除时，如果你看，我已经在我的代码中有了。看一看，我已经看了这个，但它并没有真正告诉你如何在提交后清除单选按钮，但只有当我直接点击清除，我已经在我的代码，如果你看。