Невозможно использовать функции набора Redux в handleChange

Question

Можем ли мы присвоить значение состояния избыточности?

Я просто хотел поместить выбранное значение в избыточность, чтобы получить доступ к нему из родительского компонента.Есть ли другой способ получить доступ к дочернему компоненту выбранного значения.У меня есть избыточный объект, но я не могу поместить в него данные этого дочернего компонента.Но я могу использовать его от родителя. Помогите, плз

Когда я попробую это.Я получил ошибку.что-то вроде этого;

class Dropdown extends Component {

    constructor(props) {
        super(props)
        this.state = {
            value: this.props.placeHolder,
            data: [],
            selectedOption: null,
            selectedOption2: null
        }
        this.handleChange = this.handleChange.bind(this)
        this.handleChangeDestination = this.handleChangeDestination.bind(this)
    }
    filterDestinationList(data) {
        if (this.state.selectedOption != null) {
            let filteredData = data.filter(arrayItem => arrayItem.label !== this.state.selectedOption.label);
            LocationsActions.reloadDestinationList(filteredData)
        }
    }

    handleChange = (selectedOption) => {
        this.setState({ selectedOption });
        console.log(`Option selected:`, selectedOption);
        let location = this.state.selectedOption

        LocationsActions.setOrigin(location)//when I use this, got an error
    }

    handleChangeDestination = (selectedOption2) => {
        this.setState({ selectedOption2 });
        console.log(`Option selected:`, selectedOption2);
    }
    render() {


        if (this.props.type == "from") {
            const { selectedOption } = this.state;
            return (

                <div style={dropDownHolder} className="from-dropdown">
                    <div>
                        <h4>{this.props.title}</h4>
                    </div>

                    <Select
                        value={selectedOption}
                        defaultValue={this.props.selectedItem}
                        onChange={this.handleChange}
                        options={this.props.originList}
                        onBlur={() => { this.filterDestinationList(this.props.originList) }}
                    />

                </div>
            );
        }
        if (this.props.type == "to") {
            const { selectedOption2 } = this.state;
            return (
                <div style={dropDownHolder} className="from-dropdown">
                    <div>
                        <h4>{this.props.title}</h4>
                    </div>
                    <Select
                        value={selectedOption2}
                        defaultValue={this.props.selectedItem}
                        onChange={this.handleChangeDestination}
                        options={this.props.destinationList}
                    />

                </div>)
        }
    }
}
export default Dropdown;

Answer 1

Да, вы можете

Вам необходимо выполнить следующие шаги:

Создать тип действия, например,

const SET_FILTER = 'SET_FILTER';

Создать действие

const setFilter = filter => dispatch({ type: SET_FILTER, payload: filter });

Обработайте это в редукторе

case SET_FILTER:
  return {
    ...state,
    filter: action.payload
  }

Свяжите это действие и значение с вашим компонентом, где это необходимо

connect(state => ({ filter: state.someReducer.filter }), { setFilter: actions.setFilter })(YourComponent)

Как вы можете установить фильтр

this.props.setFilter(value);

Вот каквы можете получить доступ к этому значению в родительском

this.props.filter