Main.js

import React, { Component } from 'react'; import { connect } from 'react-redux'; import Header from '../Header/Header.js'; import Filter from '../Generals/Filter/Filter'; import history from '../Router/History'; import { setMainFilterDevice, setMainFilterProvider } from '../../actions/Actions'; class Main extends Component{ constructor(props){ super(props); this.props = props; } render(){ return ( <React.Fragment> <Header caption='test' buttons={ [ { text: "Добавить", func: () => {history.push("/newmarket")}, classes: "btn-success ml-3" }, { text: "Удалить все", func: () => {this.props.changeFilterProvider(3)}, classes: "btn-danger ml-3" } ] }/> <Filter caption="Тип устройства:" float="right" direction="row" buttons={ [ { text: "Desktop", value: 0, }, { text: "Tablet", value: 1, }, { text: "Mobile", value: 2, } ] } activeValue={this.props.filterDevice} onChangeVal={ (val) => this.props.changeFilterDevice.bind(this, val) } /> <Filter caption="Поставщик:" float="right" direction="row" buttons={ [ { text: "111", value: 0, }, { text: "222", value: 1, }, { text: "333", value: 2, } ] } activeValue={this.props.filterProvider} onChangeVal = { (val) => this.props.changeFilterProvider.bind(this, val) } /> </React.Fragment> ) } } const mapStateToProps = state => { return { filterDevice: state.Main.filterDevice, filterProvider: state.Main.filterProvider, } } const mapDispatchToProps = (dispatch) => { return { changeFilterDevice : (val) => { dispatch(setMainFilterDevice(val)) }, changeFilterProvider : (val) => { dispatch(setMainFilterProvider(val)) } } }; export default connect( mapStateToProps, mapDispatchToProps )(Main);

Filter.js

 import React from 'react' const Filter = ({caption, buttons, onChangeVal, activeValue, float, direction}) => <div className={"d-flex align-items-center mt-2 mb-2" + getClassElem("container", float, direction)}> { caption ? <div className={"mr-3" + getClassElem("caption", null, direction)}><strong>{caption}</strong></div> : "" } <div className="btn-group btn-group-toggle "> { buttons.map((btn, i) => <label className={"btn btn-secondary" + (activeValue === btn.value ? " active" : "")} onClick={onChangeVal(btn.value)} key={i}> <input type="radio" name="options" autoComplete="off" defaultChecked="" value={btn.value}/> {btn.text} </label> ) } </div> </div> export default Filter; const getClassElem = (type, float, direction) => { let className = ""; switch(type){ case "container": switch(float){ case "left": className += " mr-auto"; break; case "right": className += " ml-auto"; break; default: break; } switch(direction){ case "column": className += " flex-column"; break; default: break; } break; case "caption": switch(direction){ case "column": className += " mb-2"; break; default: break; } break; default: break; } return className; }

By clicking on the label, a function is called that I passed as a parameter from Main.js. This function in turn action. In the console, the action executes twice on click. I do not understand what could be the matter. Tell me please.

    1 answer 1

    This is due to the fact that you post on onClick is not a function, but the result of its implementation. You need instead of this onClick={onChangeVal(btn.value)} to write like this: onClick={onChangeVal.bind(thid, btn.value)}

    • onChangeVal = {(val) => this.props.changeFilterDevice.bind (this, val)} I already transfer the function with the wrapper (bind) to the property - Alexander Levochko
    • You do not correctly call a function in the Filter component. Replace with () => onChangeVal(btn.value) - Alexandr Tovmach