![](/img/trans.png)
[英]How to call a onclick function inside a Template literal in React js
[英]How to call calling a function inside a Template literal
如何在模板文字中调用函数。
以下尝试中的函数语法显示在HTML中:
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
var html = `
<div class="row">
${reader.onload = function (e) {
$('#image_upload_preview').attr('src', e.target.result);
}}
<img id="image_upload_preview" src="http://placehold.it/100x100" alt="your image" />
</div>
`;
$("#test").append(html);
reader.readAsDataURL(input.files[0]);
}
}
$("#multi-file").change(function () {
readURL(this);
});
谢谢大家。
如果我正确理解您的问题,您需要在模板文字中定义和调用该函数。
一些背景 :
您可以在模板文字中执行表达式,如下所示:
function fun(){
return 5
}
var someLit=`some function got a value ${fun()}`
所以这是文字内部函数的最简单和最佳用法。 现在你要在你的例子中尝试做的是,评估表达式
reader.onload = function (e) {
$('#image_upload_preview').attr('src', e.target.result);
}
在模板文字内部,这为onload绑定和事件,但reader.onload
的返回值在模板文字内的该位置被替换。
你在输出中看到function(){...
如果您不想在输出中看到该函数声明,则可以立即调用该函数。
例:
(reader.onload = function (e) {
$('#image_upload_preview').attr('src', e.target.result);
})();
这将在表达式的位置返回undefined。 现在,如果您想避免使用undefined
,可以从函数中返回一些空字符串。
(reader.onload = function (e) {
$('#image_upload_preview').attr('src', e.target.result);
return '';
})();
现在,由于您已将此函数用作事件的回调,因此立即调用该函数可能没有帮助(因为您不会在那里获取e参数)。
所以你可以将事件绑定到另一个函数中,如:
(function(){
reader.onload = function (e) {
$('#image_upload_preview').attr('src', e.target.result);
}
return '';
})();
这将声明该函数,该函数绑定到您的onload
事件,并且不会在模板文字中留下痕迹。
注意:
只需在模板文字外声明函数并在文字内部随意调用它是最佳选择
这是你可以在模板文字中调用函数的方法。
function something() {
return "better than nothing";
}
console.log(`Something is ${something()}.`);
//=> Something is better than nothing.
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.