Отправьте this.state в Store из компонента и получите из другого компонента - PullRequest
Новая
       11

Отправьте this.state в Store из компонента и получите из другого компонента

0 голосов
/ 19 апреля 2020

Сейчас я не знаю, как лучше всего это сделать:

У меня есть выбор, из которого вы можете выбрать валюту, и в зависимости от валюты, которую вы выбираете, таблица переименовывается в эту валюту.

Я использую, REACTJS, REDUX, MDBDataTable от mdbreact, а форма использует Select from antd.

MDBDataTable работает, я могу отправлять данные, выбор также работает. Единственное, что мне нужно, - это какой-то способ отправить информацию о том, что я выбираю валюту на основе этой информации, и я могу отправить свои данные Джейсону на стол.

Может быть, это неправильная идея, я открыт для любое предложение (Я не программист, поэтому прошу помощи).

enter image description here

Код компонента, в котором я пытаюсь отправить значение в сортировку ( В конце): 

import React, { Component } from 'react';
import { Select } from 'antd';
import { connect } from "react-redux";

class SelecionarCrypto extends Component {
  constructor(props) {
    super(props);

    this.onChange = this.onChange.bind(this);
    this.onBlur = this.onBlur.bind(this);
    this.onFocus = this.onFocus.bind(this);
    this.onSearch = this.onSearch.bind(this);

    console.log("(SelecionarCryto.js):",this.props);

    this.state = {
      ValorState: "nada"
    }


  };

 onChange(value) {
    console.log(`selected ${value}`);
    this.setState({ValorState: value});
    console.log("(SelecionarCryto.js)  New value onchange", this.state.ValorState)

  }

  onBlur() {
    console.log('blur');
  }

  onFocus() {
    console.log('focus');
  }

  onSearch(val) {
    console.log('search:', val);
  }



render(){


const { Option } = Select;

console.log("(SelecionarCryto.js) New value Render: ", this.state.ValorState)








return (
  <Select
    showSearch
    style={{ width: 200 }}
    placeholder="Seleciona:"
    optionFilterProp="children"
    onChange={this.onChange}
    onFocus={this.onFocus}
    onBlur={this.onBlur}
    onSearch={this.onSearch}
    filterOption={(input, option) =>
      option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
    }
  >
    <Option value="ETH">ETH</Option>
    <Option value="BTC">BTC</Option>
    <Option value="XRP">XRP</Option>
  </Select>

  );
}


  }

  const mapStateToProps = state => {
    return {
      token: state.token,

    };
  };

const mapDispatchToProps = (dispatch) =>{
  return{
    ValorState: "pruebasEnviar"
  }
};

  export default connect(mapStateToProps, mapDispatchToProps)(SelecionarCrypto);

Эта часть является лишь выдержкой, в которой я пытаюсь извлечь значение из моего МАГАЗИНА. 

  const mapStateToProps = state => {
    return {
      token: state.token,
      ValorState: state.ValorState
    };
  };

export default connect(mapStateToProps)(PruebasAPI3);

Спасибо,

1 Ответ

0 голосов
/ 19 апреля 2020

Вместо того, чтобы указывать состояние валюты в локальном состоянии, вам нужно отправить действие в редукционный магазин для обновления валюты.

ваш компонент таблицы будет считывать состояние валюты из хранилища резервов и соответственно отображать таблицу.

...