Как изменить применить setState, когда onChange произошло? - PullRequest
Новая
       7

Как изменить применить setState, когда onChange произошло?

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

Это код: 

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(this.props);

    this.state = {
      ValorState: "nada"
    }


  };

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

  }

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

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

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



render(){


const { Option } = Select;

console.log("New value Render", this.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
    };
  };

  export default connect(mapStateToProps)(SelecionarCrypto);

Я пытаюсь изменить значение ValorSate после завершения onChange. Я получаю ошибку: TypeError: this.setState не является функцией. Я не могу найти решение, даже читая о setSate (). Я придерживаюсь той же схемы инструкций или документации, но я ничего не понимаю.

Теперь «Новое значение onChange» или «Новое значение Render» всегда неопределено »

консольный журнал :

enter image description here

Спасибо.

Ответы [ 4 ]

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

Я изменил ваш код. Пожалуйста, проверьте это и попробуйте. 

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

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

    console.log(this.props);

    this.state = {
      ValorState: 'nada'
    }
  };

onChange = (value) => {
  console.log(`selected ${value}`);
  this.setState({ValorState: 'algo'})
}

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

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

onSearch = (val) => {
  console.log('search:', val);
}
render(){
const { Option } = Select;

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
};
};

export default connect(mapStateToProps)(SelecionarCrypto);
1 голос
/ 19 апреля 2020

Переместите эти функции за пределы render, свяжите их с this вашего компонента и свяжите их с ключевым словом this: 

class SelecionarCrypto extends Component {
  constructor(props) {
     ...
     this.onChange = this.onChange.bind(this)
     // Similar for the rest  
  }

  onChange(value) { this.setState({ ValorState: value }) }
  onBlur() {}
  onFocus() {}
  onSearch() {}

  ...

  render(){

  ...
  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>
  )
}
0 голосов
/ 19 апреля 2020 
import React from "react";
import { Select } from "antd";
import { connect } from "react-redux";

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

    //this.onChange = this.onChange.bind(this);

    console.log(this.props);

    this.state = {
        ValorState: "nada",
    };
}

onChange(value) {
    console.log(`selected ${value}`);
    this.setState({ ValorState: "algo" });
}

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

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

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

render() {
    const { Option } = Select;

    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,
    };
};

export default connect(mapStateToProps)(SelecionarCrypto);
0 голосов
/ 19 апреля 2020 

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);

    console.log(this.props);

    this.state = {
      ValorState: 'nada'
    }


  };

 onChange=(value)=> {
  console.log(`selected ${value}`);
  this.setState({ValorState: 'algo'})
}

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

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

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



render(){


const { Option } = Select;



return (
  <Select
    showSearch
    style={{ width: 200 }}
    placeholder="Seleciona:"
    optionFilterProp="children"
    onChange={this.onChange}
    onFocus={onFocus}
    onBlur={onBlur}
    onSearch={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
    };
  };

  export default connect(mapStateToProps)(SelecionarCrypto);

функция должна быть вне рендера, а функция bind onchange в противном случае setState не будет действовать

...