Javascript 如何从onChange函数将值存储在全局变量中?
我需要访问onChange函数返回的值,但它没有读取任何内容,因为它显然没有正确存储。这是我的密码: HTML: 接下来,我需要在ImageBase64函数变量中存储返回值:Javascript 如何从onChange函数将值存储在全局变量中?,javascript,reactjs,base64,Javascript,Reactjs,Base64,我需要访问onChange函数返回的值,但它没有读取任何内容,因为它显然没有正确存储。这是我的密码: HTML: 接下来,我需要在ImageBase64函数变量中存储返回值: let imageBase64Function = this.getBase64(); 当我执行reader.result的console.log时,我得到了正确的base64信息。但我需要将其存储在imageBase64变量中。我试着研究全局变量和赋值,但我知道我做错了什么。非常感谢您的帮助,谢谢 编辑:在尝试设置状态
let imageBase64Function = this.getBase64();
当我执行reader.result的console.log时,我得到了正确的base64信息。但我需要将其存储在imageBase64变量中。我试着研究全局变量和赋值,但我知道我做错了什么。非常感谢您的帮助,谢谢
编辑:在尝试设置状态并使用base64字符串后,通过删除开头的元数据解决
constructor (props) {
super(props);
this.state = {
selectedImage: null,
errors: {}
}
this.onChange = this.onChange.bind(this);
this.getBase64 = this.getBase64.bind(this);
}
onChange = (e) => {
this.setState({
selectedImage: e.target.files[0]
})
let files = e.target.files;
let file = e.target.files[0];
if (files.length > 0 && file) {
this.getBase64(files[0]);
}
}
getBase64(file) {
let reader = new FileReader();
console.log(file);
reader.onload = function () {
console.log(reader.result);
let binaryString = reader.result;
let base64OrigString = binaryString.split('base64,');
let base64Split = base64OrigString[1];
//return binaryString;
this.setState({selectedImage: base64Split})
}.bind(this)
reader.readAsDataURL(file);
reader.onerror = function (error) {
console.log('Error: ', error);
}
}
您可以调用
this.setState({selectedImage:binaryString})
,而不是返回binaryString
。正如您在测试中发现的,您需要取消绑定(this),以便可以从嵌套函数中调用this.setState
。另一种可能的解决方案是保持绑定不变,但更改调用匿名reader.onload
函数的方式。这将保留外部this
,并允许您从块内访问this.state
reader.onload=()=>{…}
您不能调用this.setState({selectedImage:binaryString})
,而不是返回binaryString
,然后只调用this.state.binaryString作为变量吗?那行得通吗?试试也无妨嗯,好像不行?我得到一个this.setState不是一个函数,即使我将这两个函数都绑定到状态?我已经更新了我的原始帖子,向您展示了它现在的样子/
let imageBase64Function = this.getBase64();
constructor (props) {
super(props);
this.state = {
selectedImage: null,
errors: {}
}
this.onChange = this.onChange.bind(this);
this.getBase64 = this.getBase64.bind(this);
}
onChange = (e) => {
this.setState({
selectedImage: e.target.files[0]
})
let files = e.target.files;
let file = e.target.files[0];
if (files.length > 0 && file) {
this.getBase64(files[0]);
}
}
getBase64(file) {
let reader = new FileReader();
console.log(file);
reader.onload = function () {
console.log(reader.result);
let binaryString = reader.result;
let base64OrigString = binaryString.split('base64,');
let base64Split = base64OrigString[1];
//return binaryString;
this.setState({selectedImage: base64Split})
}.bind(this)
reader.readAsDataURL(file);
reader.onerror = function (error) {
console.log('Error: ', error);
}
}