如何在React Admin框架中重置过滤器值？

Question

我有一个过滤器组件：

{% load widget_tweaks %}
<form role="form" id="task-create-form" name="create-form" method="post" action="{% url 'tasks:task_create' %}">
<div class="modal-header">
    <h5 class="modal-title" id="CreateTaskModalLabel">Create new task</h5><div id="MultiSelectError" style="display: none;color: red">Environment field : you need to check at least one case</div>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>
<div class="modal-body">
    {% csrf_token %}
    <div class="row">
        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
            <div class="form-group">
                <label class="control-label" for="{{ form.title.id_for_label }}">Title</label>
                {% render_field form.title class+="form-control" %}
            </div>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
            <div class="form-group">
                <label class="control-label" for="{{ form.location.id_for_label }}">Location</label>
                {% render_field form.location class+="form-control" %}
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
            <div class="form-group">
                <label class="control-label" for="{{ form.type.id_for_label }}">Type</label>
                {% render_field form.type class+="form-control" %}
            </div>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
            <div class="form-group">
                <label class="control-label" for="{{ form.criticity.id_for_label }}">Criticity</label>
                {% render_field form.criticity class+="form-control" %}
            </div>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
            <div class="form-group">
            <label class="control-label" for="{{ form.environment.id_for_label }}">Environment</label>
            <div class="checkbox-group required">
                {% for value, text in form.environment.field.choices %}
                    <div class="ui slider checkbox" style="margin-left: 20px;">
                        <input class="cb_required_env" id="id_environment_{{ forloop.counter0 }}" name="{{ form.environment.name }}"
                               type="checkbox" value="{{ value }}">
                        <label for="id_environment_{{ forloop.counter0 }}">{{ text }}</label>
                    </div>
                {% endfor %}
            </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="form-group">
                <label class="control-label" for="{{ form.description.id_for_label }}">Description</label>
                {% render_field form.description class+="form-control" rows=4 %}
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
            <div class="form-group">
                <label class="control-label" for="{{ form.start_date.id_for_label }}">Start date</label>
                <div id='datetimepicker'>
                    {% render_field form.start_date class+="form-control" %}
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
            <div class="form-group">
                <label class="control-label" for="{{ form.duration.id_for_label }}">Duration (in hours)</label>
                <div id="duration_field">
                    {% render_field form.duration class+="form-control" %}
                </div>
                <script type="text/javascript">
                    $("input[name='duration']").TouchSpin({
                        initval: 1,
                        min: 0.1,
                        max: 100,
                        step: 0.1,
                        decimals: 2,
                        boostat: 5,
                        maxboostedstep: 10,
                    });
                </script>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
            <div class="form-group">
                <label class="control-label" for="{{ form.status.id_for_label }}">Status</label>
                {% render_field form.status class+="form-control" %}
            </div>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
            <div class="form-group">
                <label class="control-label" for="{{ form.percent_of.id_for_label }}">Percent complete</label>
                {% render_field form.percent_of class+="form-control" %}
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="form-group">
                    {% render_field form.send_mail %}
                    <label class="control-label" for="{{ form.send_mail.id_for_label }}">Check here if you want to send an email</label>
            </div>
        </div>
    </div>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
    <button type="submit" class="btn btn-primary" value="deploy" onclick="checkField()">Submit</button>
</div>

我需要添加一个重置按钮，以清除输入值。我知道应该通过将smth分发到redux来完成。那么也许有人已经解决了这个问题？谢谢！

Answer 1

过滤器组件中有一个setFilters道具，您可以使用它：

export const PostsFilter = (props) => (
  <div>
    <Filter {...props}>
      <TextInput label='Post ID' source='id' alwaysOn />
      <TextInput label='User ID' source='user_id' alwaysOn />
    </Filter>
    <Button onClick={() => props.setFilters({
          id: '',
          user_id: ''
     })}>Clear fields</Button>
  <div>
);

Answer 2

这是我创建“清除过滤器”按钮（myfile = open(file, 'r') Lines = myfile.readline() for line in Lines: client.publish(f"{topic}", str(line.strip())) time.sleep(5) ）的方式。

扩展到custom ListActions toolbar example ...

"react-admin": "3.10.2"

跟踪：https://github.com/marmelab/react-admin/issues/816#issuecomment-734030723

Answer 3

听起来您想清除TextInput中的值，而无需查看您给我们的内容进行redux。

其中一种使用的方法是通过onChange()函数将过滤器输入保存为状态-也许您还可以在其中调用该操作以击中后端或更改道具中帖子的状态

要进行重置，您可以在onClick()调用handleReset(inputId)时使用另一个按钮，您可以在该按钮上调用setState({filterUser: 'testUser123'})来完成您要的操作。

尽管这取决于您要如何处理所有事情，但没有足够的信息来了解您的工作方式，因此我只是在推测人们处理事情的通用方式。

Answer 4

不幸的是，setFilters对我没有任何帮助。 这是解决问题的方法：

<FormDataConsumer form={'filterForm'} alwaysOn source='stateId'>
      {({ formData, dispatch, ...rest }) => (
        <ReferenceInput
          resource={props.resource}
          source='stateId'
          reference='states'
          onChange={value => {
            dispatch(change('filterForm', 'districtId', null));
          }}
          allowEmpty>
          <SelectInput optionText='name' />
        </ReferenceInput>
      )}
    </FormDataConsumer>

    {(props.filterValues.stateId || props.filterValues.districtId) && (
      <ReferenceInput
        key={props.filterValues.stateId}
        source='districtId'
        reference='districts'
        filter={{ stateId: props.filterValues.stateId }}
        alwaysOn>
        <SelectInput optionText='name' />
      </ReferenceInput>
    )}

Answer 5

const PostActions = ({
  bulkActions,
  basePath,
  currentSort,
  displayedFilters,
  exporter,
  filters,
  filterValues,
  onUnselectItems,
  resource,
  selectedIds,
  showFilter,
  total,
  setFilters,
}) => (
  <CardActions>
    {/* Add your custom actions */}
    <Button variant="text" onClick={() => setFilters({})}>
      Clear Filters
    </Button>
    {bulkActions &&
      React.cloneElement(bulkActions, {
        basePath,
        filterValues,
        resource,
        selectedIds,
        onUnselectItems,
      })}
    {filters &&
      React.cloneElement(filters, {
        resource,
        showFilter,
        displayedFilters,
        filterValues,
        context: 'button',
      })}
    <ExportButton
      disabled={total === 0}
      resource={resource}
      sort={currentSort}
      filter={filterValues}
      exporter={exporter}
    />
  </CardActions>
); 

<List
    {...props}
    filters={<LeadTimeFilter />}
    bulkActions={false}
    actions={<PostActions />}
  >

 您可以在动作中添加一个重置按钮。在动作中，您可以获取“ setFilters”方法，该方法可以重置道具中的过滤器。