react.js 下获取各种input控件的值 radio、checkbox等

react.js 下获取各种input控件的值 radio、checkbox等,第1张

1、在react中可以给输入控件(如input type=text)加上引用名,好获取它的输入值
例如:

2、<textarea >控件,它和input不同,它是开标签,内容是包括在<textarea >和</textarea>之间的。如果需要获取<textarea >的值,同样可以用ref来获取
例如:

注意:这里log出来的是页面用户输入后的最终文字。

3、单选radio和多选checkbox,获取它们的值最好还是用一个公共变量如state来保存,因为它们的值只能在触发事件中获取,不像text控件可以后期提交时获取。初始值可以通过 defaultChecked={true} 来设置。

radio例子:

如果是checkbox,用div包住不合适,因为div每次点击只能获取点击一次的值。所以checkbox需要写到每个checkbox 控件里面的onChange或onClick事件。可以通过一个state的数组来存储变更。checkbox例子:

这个你可以在设计模板的时候,给checkbox添加一个onclick事件,如:
<asp:CheckBox ID= "chkItem1" runat= "server" onclick= "if(thischecked) chgText(getRowValue(this))"/>
下面是js脚本代码:
<script type = "text/javascript ">
function getRowValue(sender)
{//如果想在按钮里判断,可以取消注释的if语句,然后用getelementbyid获得checkbox控件组,用for循环遍历每个控件
//if(senderchecked){
var tblRow = senderparentNodeparentNode;
return tblRowcells[1]innerText; //具体要哪列的,自己去修改
//}
}
function chgText(text)
{
var objtext = documentgetElementById("Text1");
objtextvalue = objtextvalue + text + ",";
}
</script>

给那table加个ID为“table”
var rows = documentgetElementById("table")rows;
for(var i=0;i<rowslength;i++){
if(rows[i]cells[2]firstChildchecked||rows[i]cells[3]firstChildchecked||rows[i]cells[4]firstChildchecked){
var str = rows[i]cells[0]innerHTML+" "+rows[i]cells[1]innerHTML;
if(rows[i]cells[2]firstChildchecked)
str += " "+1;
else
str += " "+0;
if(rows[i]cells[3]firstChildchecked)
str += " "+1;
else
str += " "+0;
if(rows[i]cells[4]firstChildchecked)
str += " "+1;
else
str += " "+0;

alert(str);//打印出如:abc abc 1 0 1之类的语句,如果那行一个都没有选则不打印
}
}


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/yw/12613188.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-26
下一篇 2023-05-26

发表评论

登录后才能评论

评论列表(0条)

保存