[英]How to change apply setState when onChange happend?
This the code:这是代码:
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);
I am trying to change the value of ValorSate when onChange is done.当 onChange 完成时,我正在尝试更改 ValorSate 的值。 The error I am obtaining is: TypeError: this.setState is not a function.我得到的错误是:TypeError: this.setState is not a function。 I don´t find out the solution even readin about setSate().我什至没有找到关于 setSate() 的解决方案。 I am followinf the same pattern of how-to´s or documentation but I no understanding something.我遵循相同的操作方法或文档模式,但我不明白一些东西。
Now "New value onChange" or "New value Render" is always undefined"现在“新值 onChange”或“新值渲染”始终未定义”
console log:控制台日志:
Thank you.谢谢你。
Move those functions outside the render
, bind them to the this
of your component and reference them with the this
keyword:将这些函数移到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>
)
}
I have modified your code.我已经修改了你的代码。 Please check it and try.请检查并尝试。
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 } 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);
function must be a outside from render and bind onchange function otherwise setstate will not effective function 必须是外部渲染和绑定 onchange function 否则 setstate 将无效
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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.