React的受控组件用法详解！ react.js

一、受控组件是什么？用state来获取和设置输入元素值的组件，称之为受控组件。, </code> 和 <code></code> 等标签都可用 <code>value</code> 属性，来实现受控组件。<br /> 二、有哪些受控组件？ 1、input - 阻止表单提交 <blockquote><code>class NameForm extends React.Component { constructor(props) { super(props); this.state = { value: '' }; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); }handleChange(event) { this.setState({ value: event.target.value }); }handleSubmit(event) { alert('提交的名字: ' + this.state.value); event.preventDefault(); }render() { return ( <form onSubmit={this.handleSubmit}> <label> 名字: <input type="text" value=https://www.it610.com/article/{this.state.value} onChange={this.handleChange} /> </label> <input type="submit" value="https://www.it610.com/article/提交" /> </form> ); } }</code></blockquote><br /> - file类型input <blockquote><code>// file类型的input，属性value是只读的，所以是非受控组件 <input type="file" /></code></blockquote><br /> - 多个input <blockquote><code>// 多个input时，设置下name属性，即可动态操作，无需硬编码 class Reservation extends React.Component { constructor(props) { super(props); this.state = { isGoing: true, numberOfGuests: 2 }; this.handleInputChange = this.handleInputChange.bind(this); }handleInputChange(event) { const target = event.target; const value = https://www.it610.com/article/target.type ==='checkbox' ? target.checked : target.value; const name = target.name; this.setState({ [name]: value }); }render() { return ( <form> <label> 参与: <input name="isGoing" type="checkbox" checked={this.state.isGoing} onChange={this.handleInputChange} /> </label> <br /> <label> 来宾人数: <input name="numberOfGuests" type="number" value=https://www.it610.com/article/{this.state.numberOfGuests} onChange={this.handleInputChange} /> </label> </form> ); } }</code></blockquote><br /> 2、textarea 用value属性来设置textarea的文本内容：<br /> <blockquote><code>class EssayForm extends React.Component { constructor(props) { super(props); this.state = { value: '请撰写一篇关于你喜欢的 DOM 元素的文章.' }; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); }handleChange(event) { this.setState({ value: event.target.value }); }handleSubmit(event) { alert('提交的文章: ' + this.state.value); event.preventDefault(); }render() { return ( <form onSubmit={this.handleSubmit}> <label> 文章: <textarea value=https://www.it610.com/article/{this.state.value} onChange={this.handleChange} /> </label> <input type="submit" value="https://www.it610.com/article/提交" /> </form> ); } }</code></blockquote><br /> 3、select <strong>【React的受控组件用法详解！】</strong>传统HTML中，用 <code>selected</code> 来设置选中项，而在React中使用 <code>value</code> 属性：<br /> <blockquote><code>// HTML中使用selected属性 < select > <option value="https://www.it610.com/article/grapefruit">葡萄柚</option> <option value="https://www.it610.com/article/lime">酸橙</option> <option selected value="https://www.it610.com/article/coconut">椰子</option> <option value="https://www.it610.com/article/mango">芒果</option> </code></blockquote><br /> <blockquote><code>// React中使用value属性 class FlavorForm extends React.Component { constructor(props) { super(props); this.state = { value: 'coconut' }; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); }handleChange(event) { this.setState({ value: event.target.value }); }handleSubmit(event) { alert('你喜欢的风味是: ' + this.state.value); event.preventDefault(); }render() { return ( <form onSubmit={this.handleSubmit}> <label> 选择你喜欢的风味:<option value="https://www.it610.com/article/grapefruit">葡萄柚</option> <option value="https://www.it610.com/article/lime">酸橙</option> <option value="https://www.it610.com/article/coconut">椰子</option> <option value="https://www.it610.com/article/mango">芒果</option></label> <input type="submit" value="https://www.it610.com/article/提交" /> </form> ); } }</code></blockquote><br /> <blockquote><code>// 传递数组给value属性，表示select标签，选中多个选项 </code></blockquote><br /> 参考文档 <ul> <li>React的受控组件用法详解！</li> </ul></p> <div class="dede_pages"><ul></ul></div> <div class="pcd_ad"> <center><div class="_ahwullr0ac"></div> <script type="text/javascript"> (window.slotbydup = window.slotbydup || []).push({ id: "u6834461", container: "_ahwullr0ac", async: true }); </script> <script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/cm.js" async="async" defer="defer" > </script></center> </div> <div class="mbd_ad"> <div style=margin-top:10px;margin-bottom:10px;> <div class="_i7aftr79jl"></div> <script type="text/javascript"> (window.slotbydup = window.slotbydup || []).push({ id: "u5950612", container: "_i7aftr79jl", async: true }); </script>  <script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/cm.js" async="async" defer="defer" > </script> </div> </div> <h3>推荐阅读</h3> <ul class="post-loop post-loop-default cols-0"> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/556448.html" title="电商模式 mv是电商的什么，电商平台"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="电商模式 mv是电商的什么，电商平台" src="http://img.readke.com/220419/2132452M4-0-lp.jpg"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/556448.html"> <b>电商模式 mv是电商的什么，电商平台 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/2838205.html" title="蓝光驱蚊灯可以和人在一起吗"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="蓝光驱蚊灯可以和人在一起吗" src="/images/defaultpic.gif"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/2838205.html"> <b>蓝光驱蚊灯可以和人在一起吗 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/945676.html" title="兼职跨境电商怎么样跨境电商可以做什么兼职，哪个跨境电商平台适合兼职做"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="兼职跨境电商怎么样跨境电商可以做什么兼职，哪个跨境电商平台适合兼职做" src="http://img.readke.com/221128/1921214502-0-lp.jpg"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/945676.html"> <b>兼职跨境电商怎么样跨境电商可以做什么兼职，哪个跨境电商平台适合兼职做 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/970694.html" title="香菇酿肉的方法"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="香菇酿肉的方法" src="http://img.readke.com/230213/2230233033-0-lp.jpg"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/970694.html"> <b>香菇酿肉的方法 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/2177201.html" title="方牌玉件的佩戴方法方形玉牌吊坠怎么佩戴"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="方牌玉件的佩戴方法方形玉牌吊坠怎么佩戴" src="http://img.readke.com/230521/1U9294M2-0-lp.jpg"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/2177201.html"> <b>方牌玉件的佩戴方法方形玉牌吊坠怎么佩戴 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/977504.html" title="纳兰词全集及赏析温室的花"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="纳兰词全集及赏析温室的花" src="http://img.readke.com/230214/0R95BQ7-0-lp.jpg"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/977504.html"> <b>纳兰词全集及赏析温室的花 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/2396689.html" title="cdrx8安装提示已安装另一个版本解决方法"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="cdrx8安装提示已安装另一个版本解决方法" src="http://img.readke.com/230602/2026243U7-0-lp.jpg"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/2396689.html"> <b>cdrx8安装提示已安装另一个版本解决方法 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/3560299.html" title="win10自带硬盘安装系统怎么安装，win10自带硬盘安装系统怎么安装不了"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="win10自带硬盘安装系统怎么安装，win10自带硬盘安装系统怎么安装不了" src="/images/defaultpic.gif"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/3560299.html"> <b>win10自带硬盘安装系统怎么安装，win10自带硬盘安装系统怎么安装不了 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/3173320.html" title="微信没声音怎么回事没有声音解决办法"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="微信没声音怎么回事没有声音解决办法" src="http://img.readke.com/230921/1141344D2-0-lp.png"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/3173320.html"> <b>微信没声音怎么回事没有声音解决办法 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/0P4335462021.html" title="智齿|智齿发炎，疼痛得厉害还不能拔牙，有什么应急措施？"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="智齿|智齿发炎，疼痛得厉害还不能拔牙，有什么应急措施？" src="/images/defaultpic.gif"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/0P4335462021.html"> <b>智齿|智齿发炎，疼痛得厉害还不能拔牙，有什么应急措施？ </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/3818980.html" title="人工智能论文，人工智能的发展前景及其应用的论文怎么写"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="人工智能论文，人工智能的发展前景及其应用的论文怎么写" src="/images/defaultpic.gif"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/3818980.html"> <b>人工智能论文，人工智能的发展前景及其应用的论文怎么写 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/2156422.html" title="北太行在什么地方北太行在哪里"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="北太行在什么地方北太行在哪里" src="http://img.readke.com/230520/0344494317-0-lp.jpg"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/2156422.html"> <b>北太行在什么地方北太行在哪里 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/3335799.html" title="博世壁挂炉德国还土耳其原因？"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="博世壁挂炉德国还土耳其原因？" src="/images/defaultpic.gif"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/3335799.html"> <b>博世壁挂炉德国还土耳其原因？ </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/2778442.html" title="2023款一汽大众辉腾一汽大众辉腾字母"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="2023款一汽大众辉腾一汽大众辉腾字母" src="http://img.readke.com/230720/0601394E6-0-lp.jpg"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/2778442.html"> <b>2023款一汽大众辉腾一汽大众辉腾字母 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/1581400.html" title="3点到5点醒是癌症征兆有科学依据吗"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="3点到5点醒是癌症征兆有科学依据吗" src="http://img.readke.com/230415/1942162U2-0-lp.jpg"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/1581400.html"> <b>3点到5点醒是癌症征兆有科学依据吗 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/1227616.html" title="樟脑丸可以放床下吗"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="樟脑丸可以放床下吗" src="/images/defaultpic.gif"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/1227616.html"> <b>樟脑丸可以放床下吗 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/983965.html" title="干燥综合征如何治疗?"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="干燥综合征如何治疗?" src="/images/defaultpic.gif"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/983965.html"> <b>干燥综合征如何治疗? </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/1480390.html" title="建设自由贸易区的意义 12个自贸试验区共有哪些"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="建设自由贸易区的意义 12个自贸试验区共有哪些" src="/images/defaultpic.gif"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/1480390.html"> <b>建设自由贸易区的意义 12个自贸试验区共有哪些 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/1813382.html" title="儿童可以使用免洗洗手液吗"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="儿童可以使用免洗洗手液吗" src="/images/defaultpic.gif"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/1813382.html"> <b>儿童可以使用免洗洗手液吗 </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/3194050.html" title="登鹳雀楼古诗看到了哪四种景物？"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="登鹳雀楼古诗看到了哪四种景物？" src="/images/defaultpic.gif"> </a> </div> <div class="item-content"> <h4 class="item-title"> <a href="/c/3194050.html"> <b>登鹳雀楼古诗看到了哪四种景物？ </b></a></h4> <div class="item-meta"> <div class="item-meta-right"> </div> </div> </div> </li> </ul> <p><br /><ul class="post-loop post-loop-list cols-4"><li><a href="/c/021T5L522022.html" title="热闹中的孤独" target="_blank">热闹中的孤独 </a></li> <li><a href="/c/021T5L512022.html" title="JAVA（抽象类与接口的区别&重载与重写&内存泄漏）" target="_blank">JAVA（抽象类与接口的区别&重载与重写&内存泄漏） </a></li> <li><a href="/c/021T5L4R022.html" title="放屁有这三个特征的，请注意啦！这说明你的身体毒素太多" target="_blank">放屁有这三个特征的，请注意啦！这说明你的身体毒素太多 </a></li> <li><a href="/c/021T5L4H022.html" title="一个人的旅行，三亚" target="_blank">一个人的旅行，三亚 </a></li> <li><a href="/c/021T5L3R022.html" title="布丽吉特，人生绝对的赢家" target="_blank">布丽吉特，人生绝对的赢家 </a></li> <li><a href="/c/021T5L362022.html" title="慢慢的美丽" target="_blank">慢慢的美丽 </a></li> <li><a href="/c/021T5L342022.html" title="尽力" target="_blank">尽力 </a></li> <li><a href="/c/021T5L332022.html" title="一个小故事，我的思考。" target="_blank">一个小故事，我的思考。 </a></li> <li><a href="/c/021T5L322022.html" title="家乡的那条小河" target="_blank">家乡的那条小河 </a></li> <li><a href="/c/021T5L292022.html" title="《真与假的困惑》???|《真与假的困惑》??? ——致良知是一种伟大的力量" target="_blank">《真与假的困惑》???|《真与假的困惑》??? ——致良知是一种伟大的力量 </a></li> </ul></p> <div class=entry-copyright> <p></p> </div> </div> <div class="entry-footer"> <div class="prev-next sb br mb clearfix"> <p class="post-prev fl ellipsis">上一篇：<a href='/c/112I429502021.html'>React的列表组件必须要有key（）</a> </p> <p class="post-next fr ellipsis">下一篇：<a href='/c/112I429522021.html'>《蚯蚓》观后记</a> </p> </div> </div> </div> </article> </main> <aside class="sidebar"> <div class="widget widget_post_thumb"> <h3 class="widget-title"><span>更多...</span></h3> <ul> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/0Z314005H021.html" title="004不忘初心"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="004不忘初心" src="/images/defaultpic.gif"> </a></div> <div class="item-content"> <p class="item-title"><a href="/c/0Z314005H021.html" title="004不忘初心">004不忘初心</a></p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/0203433JH022.html" title="生命蜕变能量点断食——第23期-2021-05-07"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="生命蜕变能量点断食——第23期-2021-05-07" src="/images/defaultpic.gif"> </a></div> <div class="item-content"> <p class="item-title"><a href="/c/0203433JH022.html" title="生命蜕变能量点断食——第23期-2021-05-07">生命蜕变能量点断食——第23期-2021-05-07</a></p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/09152120C2021.html" title="重归正轨"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="重归正轨" src="/images/defaultpic.gif"> </a></div> <div class="item-content"> <p class="item-title"><a href="/c/09152120C2021.html" title="重归正轨">重归正轨</a></p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/091421022R021.html" title="不寄希望于能早起"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="不寄希望于能早起" src="/images/defaultpic.gif"> </a></div> <div class="item-content"> <p class="item-title"><a href="/c/091421022R021.html" title="不寄希望于能早起">不寄希望于能早起</a></p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/092323FW2021.html" title="此刻曼妙"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="此刻曼妙" src="/images/defaultpic.gif"> </a></div> <div class="item-content"> <p class="item-title"><a href="/c/092323FW2021.html" title="此刻曼妙">此刻曼妙</a></p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/0Z41462222021.html" title="《将心比心换真心》『99天将帅极限挑战赛』（33）"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="《将心比心换真心》『99天将帅极限挑战赛』（33）" src="/images/defaultpic.gif"> </a></div> <div class="item-content"> <p class="item-title"><a href="/c/0Z41462222021.html" title="《将心比心换真心》『99天将帅极限挑战赛』（33）">《将心比心换真心》『99天将帅极限挑战赛』（33）</a></p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/0ZQK2602021.html" title="闪闪发光的少年"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="闪闪发光的少年" src="/images/defaultpic.gif"> </a></div> <div class="item-content"> <p class="item-title"><a href="/c/0ZQK2602021.html" title="闪闪发光的少年">闪闪发光的少年</a></p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/02144501112022.html" title="辛丑牛年初一（202110）"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="辛丑牛年初一（202110）" src="/images/defaultpic.gif"> </a></div> <div class="item-content"> <p class="item-title"><a href="/c/02144501112022.html" title="辛丑牛年初一（202110）">辛丑牛年初一（202110）</a></p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/091H19D22021.html" title="我喜欢自己"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="我喜欢自己" src="/images/defaultpic.gif"> </a></div> <div class="item-content"> <p class="item-title"><a href="/c/091H19D22021.html" title="我喜欢自己">我喜欢自己</a></p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="/c/09192241B2021.html" title="汪曾祺名言"> <img width="480" height="300" class="attachment-default size-default wp-post-image j-lazy" alt="汪曾祺名言" src="/images/defaultpic.gif"> </a></div> <div class="item-content"> <p class="item-title"><a href="/c/09192241B2021.html" title="汪曾祺名言">汪曾祺名言</a></p> </div> </li> </ul> </div> </aside> </div> </div> <footer class="footer"> <div class="container"> <div class="clearfix"> <div class="footer-col footer-col-logo"> </div> <div class="footer-col footer-col-copy"> <ul class="footer-nav hidden-xs"> <li class="menu-item menu-item-706"><a href="/baike/">生活百科</a></li> <li class="menu-item menu-item-706"><a href="/it/">it技术</a></li> </ul> <div class="copyright"> <p>Copyright © 2017-2022 锐客网 <a href="http://beian.miit.gov.cn/" target="_blank" rel="nofollow">京ICP备11041112号-41</a> </p> </div> </div> <div class="footer-col footer-col-sns"> <div class="footer-sns"> </div> </div> </div> </div> </footer> <div class="action action-style-0 action-color-0 action-pos-1" style="bottom:15%;"> <div class="action-item gotop j-top"> <i class="web-icon wi action-item-icon"><svg aria-hidden="true"> <use xlink:href="#wi-arrow-up-2"></use> </svg></i></div> </div> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?79e4e485d34c6fc717489eaa10b314e3"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </div> <script>var _web_js={};</script> <script src="/skin/js/index.js"></script> </body> </html>