Javascript 一旦发生更改，如何更改应用设置状态？

这是代码：

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

import React，{Component}来自'React'；
从“antd”导入{Select}；
从“react redux”导入{connect}；
类SelecionarCrypto扩展组件{
建造师（道具）{
超级（道具）；
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）；
此.state={
瓦洛斯塔：“娜达”
}
};
onChange（值）{
log（`selected${value}`）；
this.setState（{ValorState:value}）；
log（“新值onchange”，this.ValorState）
}
onBlur（）{
console.log（'blur'）；
}
onFocus（）{
console.log（'focus'）；
}
onSearch（val）{
log（'search:'，val）；
}
render（）{
const{Option}=Select；
log（“新值呈现”，this.ValorState）
返回(
option.children.toLowerCase（）.indexOf（input.toLowerCase（））>=0
}
>
以太
BTC
XRP
);
}
}
常量mapStateToProps=状态=>{
返回{
令牌：state.token
};
};
导出默认连接（MapStateTops）（SelecionarCrypto）；

我试图在完成一次更改后更改ValorState的值。 我得到的错误是：TypeError:this.setState不是函数。 我甚至在阅读关于setstate（）的文章时也没有找到解决方案。我遵循相同的操作方法或文档模式，但我不了解一些东西

现在“新值更改”或“新值呈现”始终未定义

控制台日志：

---

谢谢。

将这些函数移到

渲染

之外，将它们绑定到组件的

此

，并使用

此

关键字引用它们：

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

类SelecionarCrypto扩展组件{
建造师（道具）{
...
this.onChange=this.onChange.bind（this）
//其他人也一样
}
onChange（value）{this.setState（{ValorState:value}）}
onBlur（）{}
onFocus（）{}
onSearch（）{}
...
render（）{
...
返回
(
option.children.toLowerCase（）.indexOf（input.toLowerCase（））>=0
}
>
以太
BTC
XRP
)
}

将这些函数移到

渲染

之外，将它们绑定到组件的

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

类SelecionarCrypto扩展组件{
建造师（道具）{
...
this.onChange=this.onChange.bind（this）
//其他人也一样
}
onChange（value）{this.setState（{ValorState:value}）}
onBlur（）{}
onFocus（）{}
onSearch（）{}
...
render（）{
...
返回
(
option.children.toLowerCase（）.indexOf（input.toLowerCase（））>=0
}
>
以太
BTC
XRP
)
}

import React，{Component}来自'React'；
从“antd”导入{Select}；
从“react redux”导入{connect}；
类SelecionarCrypto扩展组件{
建造师（道具）{
超级（道具）；
//this.onChange=this.onChange.bind（this）；
console.log（this.props）；
此.state={
瓦洛斯塔特：“娜达”
}
};
onChange=（值）=>{
log（`selected${value}`）；
this.setState（{ValorState:'algo'}）
}
函数onBlur（）{
console.log（'blur'）；
}
函数onFocus（）{
console.log（'focus'）；
}
函数onSearch（val）{
log（'search:'，val）；
}
render（）{
const{Option}=Select；
返回(
option.children.toLowerCase（）.indexOf（input.toLowerCase（））>=0
}
>
以太
BTC
XRP
);
}
}
常量mapStateToProps=状态=>{
返回{
令牌：state.token
};
};
导出默认连接（MapStateTops）（SelecionarCrypto）；

import React，{Component}来自'React'；
从“antd”导入{Select}；
从“react redux”导入{connect}；
类SelecionarCrypto扩展组件{
建造师（道具）{
超级（道具）；
//this.onChange=this.onChange.bind（this）；
console.log（this.props）；
此.state={
瓦洛斯塔特：“娜达”
}
};
onChange=（值）=>{
log（`selected${value}`）；
this.setState（{ValorState:'algo'}）
}
函数onBlur（）{
console.log（'blur'）；
}
函数onFocus（）{
console.log（'focus'）；
}
函数onSearch（val）{
log（'search:'，val）；
}
render（）{
const{Option}=Select；
返回(
option.children.toLowerCase（）.indexOf（input.toLowerCase（））>=0
}
>
以太
BTC
XRP
);
}
}
常量mapStateToProps=状态=>{
返回{
令牌：state.token
};
};
导出默认连接（MapStateTops）（SelecionarCrypto）；

我已修改了您的代码。请检查并重试

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

import React，{Component}来自'React'；
从“antd”导入{Select}；
从“react redux”导入{connect}；
类SelecionarCrypto扩展组件{
建造师（道具）{
超级（道具）；
console.log（this.props）；
此.state={
瓦洛斯塔特：“娜达”
}
};
onChange=（值）=>{
log（`selected${value}`）；
this.setState（{ValorState:'algo'}）
}
onBlur=（）=>{
console.log（'blur'）；
}
onFocus=（）=>{
console.log（'focus'）；
}
onSearch=（val）=>{
log（'search:'，val）；
}
render（）{
const{Option}=Select；
返回(
option.children.toLowerCase（）.indexOf（input.toLowerCase（））>=0
}
>
以太
BTC
XRP
); 
}
}
常量mapStateToProps=状态=>{
返回{
令牌：state.token
};
};
导出默认连接（MapStateTops）（SelecionarCrypto）；

我已修改了您的代码。请检查并重试

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

import React，{Component}来自'React'；
从“antd”导入{Select}；
从“react redux”导入{connect}；
类SelecionarCrypto扩展组件{
建造师（道具）{
超级（道具）；
console.log（this.props）；
此.state={
瓦洛斯塔特：“娜达”
}
};
onChange=（值）=>{
log（`selected${value}`）；
this.setState（{ValorState:'algo'}）
}
onBlur=（）=>{
安慰