внизу кнопка (
Сбросить)
на которой отчистка фильтра, как на нее дополнительно повесить событите например
<h2 className="Filter-title" onClick={() => {
this.setState({
isOpen: !this.state.isOpen
})
import React, {Component} from 'react';
import Select from 'react-select';
import DatePicker from "react-datepicker";
import {isMobile} from "react-device-detect";
import moment from 'moment';
import { object } from 'prop-types';
class Filter extends Component {
static defaultProps = {
transactionForm: {}
}
static propTypes = {
transactionForm: object
}
state = {
isOpen: false,
}
render() {
const { direction, limit, priceRange, specifications, statuses, createPeriod } = this.props.transactionForm;
return (
<div className={`Filter ${!this.state.isOpen && 'Filter--open'}`}>
<div className="Filter-top">
<h2 className="Filter-title" onClick={() => {
this.setState({
isOpen: !this.state.isOpen
})
}}>Фильтр по операциям <i className={this.state.isOpen ? 'Filter-title__open' : 'Filter-title__close'}></i></h2>
</div>
{
this.state.isOpen && (
<form className="FilterForm" onSubmit={this.props.handleSubmit}>
{!!statuses && (
<div className="FilterForm__item">
<p>{statuses.label}</p>
<div className="FilterForm__select">
<Select
key="status"
name={statuses.name}
className="active-form-select-wrapper"
value={this.props.form["TransactionsSearch[statuses]"]}
onBlurResetsInput={false}
isClearable={true}
placeholder={"Выбрать"}
classNamePrefix="active-form-select"
onChange={(v) => this.props.handleChange("TransactionsSearch[statuses]", v)}
options={Object.keys(statuses.options).map(key => ({value: key, label: statuses.options[key]}))}
isMulti={true}
/>
</div>
</div>
)}
<div className="FilterForm__footer">
<button type="submit" className="orangeBut FilterForm__button">Принять</button>
<a className="FilterForm__clear" onClick={this.props.handleClear}>Сбросить</a>
</div>
</form>
)
}
</div>
);
}
}
export default Filter;