在 HTML 中，表单元素（如、 </code> 和 <code class="gatsby-code-text"><select></code>）之类的表单元素通常自己维护 state，并根据用户输入进行更新。而在 React 中，可变状态（mutable state）通常保存在组件的 state 属性中，并且只能通过使用 <code class="gatsby-code-text">setState()</code>来更新。</p> <p>也就是说在组件内部的表单数据通常保存在state中，表单中的数据交给state对象管理</p> <pre class="brush:csharp;gutter:true;"> <script type="text/babel"> //受控组件,表单中的数据交给state管理 class Demo extends React.Component{ constructor(){ super() this.state={ name:"tom" } } render(){ return <div> <input type="text" value={this.state.name}/> </div> } } ReactDOM.render(<Demo/>,document.getElementById("app")) </script> </pre> <p> 表单中的value和state是同步关系</p> <pre> <script type=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">text/babel</span><span style="color: rgba(128, 0, 0, 1)">"</span>> <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">受控组件,表单中的数据交给state管理</span> <span style="color: rgba(0, 0, 255, 1)">class</span><span style="color: rgba(0, 0, 0, 1)"> Demo extends React.Component{ constructor(){ super() </span><span style="color: rgba(0, 0, 255, 1)">this</span>.state=<span style="color: rgba(0, 0, 0, 1)">{ name:</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">tom</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)"> } </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">this的绑定</span> <span style="color: rgba(0, 0, 255, 1)">this</span>.change=<span style="color: rgba(0, 0, 255, 1)">this</span>.change.bind(<span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">) } change(e){ </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">修改state状态</span> <span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.setState({ name:e.target.value }) } render(){ </span><span style="color: rgba(0, 0, 255, 1)">return</span> <div> <p>{<span style="color: rgba(0, 0, 255, 1)">this</span>.state.name}</p> <input type=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">text</span><span style="color: rgba(128, 0, 0, 1)">"</span> value={<span style="color: rgba(0, 0, 255, 1)">this</span>.state.name} onChange={<span style="color: rgba(0, 0, 255, 1)">this</span>.change}/> </div><span style="color: rgba(0, 0, 0, 1)"> } } ReactDOM.render(</span><Demo/>,document.getElementById(<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">app</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">)) </span></script></pre> <p></p> <p> 此时我们可以看到表单中的数据和state保持着同步的关系，修改表单中的数据，那么state中的数据也会随之改变</p> <h2 class="css-c3aatb">非受控组件</h2> <p>在大多数情况下，我们推荐使用 受控组件 来处理表单数据。在一个受控组件中，表单数据是由 React 组件来管理的。另一种替代方案是使用非受控组件，这时表单数据将交由 DOM 节点来处理。</p> <p>也就是说表单中的数据交给DOM处理</p> <p>要编写一个非受控组件，而不是为每个状态更新都编写数据处理函数，你可以 使用 ref 来从 DOM 节点中获取表单数据。</p> <pre><script type=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">text/babel</span><span style="color: rgba(128, 0, 0, 1)">"</span>> <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">非受控组件,表单中的数据交给dom管理</span> <span style="color: rgba(0, 0, 255, 1)">class</span><span style="color: rgba(0, 0, 0, 1)"> Demo extends React.Component{ constructor(){ super() </span><span style="color: rgba(0, 0, 255, 1)">this</span>.state=<span style="color: rgba(0, 0, 0, 1)">{ name:</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">tom</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)"> } } componentDidMount(){ console.log(</span><span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">) } render(){ </span><span style="color: rgba(0, 0, 255, 1)">return</span> <div> <p>{<span style="color: rgba(0, 0, 255, 1)">this</span>.state.name}</p><span style="color: rgba(0, 0, 0, 1)"> {</span><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">当render函数执行的时候，它将会给组件实例对象上去挂载一个input属性</span><span style="color: rgba(0, 128, 0, 1)">*/</span><span style="color: rgba(0, 0, 0, 1)">} </span><input <span style="color: rgba(0, 0, 255, 1)">ref</span>={(input)=>{<span style="color: rgba(0, 0, 255, 1)">this</span>.input=input}} type=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">text</span><span style="color: rgba(128, 0, 0, 1)">"</span> /> </div><span style="color: rgba(0, 0, 0, 1)"> } } ReactDOM.render(</span><Demo/>,document.getElementById(<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">app</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">)) </span></script></pre> <p>在控制台可以查看到，挂载的input属性</p> <p></p> <p> 此时我们可以这样拿到input中的value值</p> <pre class="brush:csharp;gutter:true;"> componentDidMount(){ console.log(<span style="color: rgba(255, 0, 0, 1)">this.input.value</span>) } render(){ return <div> <p>{this.state.name}</p> {/*当render函数执行的时候，它将会给组件实例对象上去挂载一个input属性*/} <input ref={(input)=>{this.input=input}} type="text"<span style="color: rgba(255, 0, 0, 1)"> value='hello'</span> /> </div> }</pre> <p> 此时就可以输出value中的值</p> <p></p> </div> <!--conend--> <div class="p-2"></div> <div class="arcinfo my-3 fs-7 text-center"> <a href='/t/etagid89-0.html' class='tagbtn' target='_blank'>react</a> </div> <div class="p-2"></div> </div> <div class="p-2"></div> <!--xg--> <div class="lbox p-4 shadow-sm rounded-3"> <div class="boxtitle"><h2 class="fs-4">相关</h2></div> <hr> <div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-564770.html">react dom移动算法</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-562681.html">React组件重构：嵌套+继承 与 高阶组件</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-562967.html">React中嵌套组件与被嵌套组件的通信</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-561843.html">AntDesign(React)学习-15 组件定义、connect、interface</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-556539.html">初学ReactJS，写了一个RadioButtonList组件</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-554177.html">快速搭建react项目骨架（按需加载、redux、axios、项目级目录等等）</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-554505.html">react传值名称使用value可能出现死循环</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-543897.html">React Native bind函数</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-543802.html">React Native constructor方法内外this的区别</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-543176.html">使用 create-react-app 创建基于 ts 项目</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-541705.html">react源码解析17.context</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-541381.html">react源码解析14.手写hooks</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div> <!----> <!----> </div> <!--xgend--> </div> <div class="col-lg-3 col-12 p-0 ps-lg-2"> <!--box--> <!--boxend--> <!--<div class="p-2"></div>--> <!--box--> <div class="lbox p-4 shadow-sm rounded-3"> <div class="boxtitle pb-2"><h2 class="fs-4"><a href="#">标签</a></h2></div> <div class="clearfix"></div> <ul class="m-0 p-0 fs-7 r-tag"> </ul> <div class="clearfix"></div> </div> <!--box end--> </div> </div> </div> </main> <div class="p-2"></div> <footer> <div class="container-fluid p-0 bg-black"> <div class="container p-0 fs-8"> <p class="text-center m-0 py-2 text-white-50">一品网 <a class="text-white-50" href="https://beian.miit.gov.cn/" target="_blank">冀ICP备14022925号-6</a></p> </div> </div> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?6e3dd49b5f14d985cc4c6bdb9248f52b"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </footer> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.min.js"></script> </body> </html>
</code> 和 <code class="gatsby-code-text"><select></code>）之类的表单元素通常自己维护 state，并根据用户输入进行更新。而在 React 中，可变状态（mutable state）通常保存在组件的 state 属性中，并且只能通过使用 <code class="gatsby-code-text">setState()</code>来更新。</p> <p>也就是说在组件内部的表单数据通常保存在state中，表单中的数据交给state对象管理</p> <pre class="brush:csharp;gutter:true;"> <script type="text/babel"> //受控组件,表单中的数据交给state管理 class Demo extends React.Component{ constructor(){ super() this.state={ name:"tom" } } render(){ return <div> <input type="text" value={this.state.name}/> </div> } } ReactDOM.render(<Demo/>,document.getElementById("app")) </script> </pre> <p> 表单中的value和state是同步关系</p> <pre> <script type=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">text/babel</span><span style="color: rgba(128, 0, 0, 1)">"</span>> <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">受控组件,表单中的数据交给state管理</span> <span style="color: rgba(0, 0, 255, 1)">class</span><span style="color: rgba(0, 0, 0, 1)"> Demo extends React.Component{ constructor(){ super() </span><span style="color: rgba(0, 0, 255, 1)">this</span>.state=<span style="color: rgba(0, 0, 0, 1)">{ name:</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">tom</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)"> } </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">this的绑定</span> <span style="color: rgba(0, 0, 255, 1)">this</span>.change=<span style="color: rgba(0, 0, 255, 1)">this</span>.change.bind(<span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">) } change(e){ </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">修改state状态</span> <span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.setState({ name:e.target.value }) } render(){ </span><span style="color: rgba(0, 0, 255, 1)">return</span> <div> <p>{<span style="color: rgba(0, 0, 255, 1)">this</span>.state.name}</p> <input type=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">text</span><span style="color: rgba(128, 0, 0, 1)">"</span> value={<span style="color: rgba(0, 0, 255, 1)">this</span>.state.name} onChange={<span style="color: rgba(0, 0, 255, 1)">this</span>.change}/> </div><span style="color: rgba(0, 0, 0, 1)"> } } ReactDOM.render(</span><Demo/>,document.getElementById(<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">app</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">)) </span></script></pre> <p></p> <p> 此时我们可以看到表单中的数据和state保持着同步的关系，修改表单中的数据，那么state中的数据也会随之改变</p> <h2 class="css-c3aatb">非受控组件</h2> <p>在大多数情况下，我们推荐使用 受控组件 来处理表单数据。在一个受控组件中，表单数据是由 React 组件来管理的。另一种替代方案是使用非受控组件，这时表单数据将交由 DOM 节点来处理。</p> <p>也就是说表单中的数据交给DOM处理</p> <p>要编写一个非受控组件，而不是为每个状态更新都编写数据处理函数，你可以 使用 ref 来从 DOM 节点中获取表单数据。</p> <pre><script type=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">text/babel</span><span style="color: rgba(128, 0, 0, 1)">"</span>> <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">非受控组件,表单中的数据交给dom管理</span> <span style="color: rgba(0, 0, 255, 1)">class</span><span style="color: rgba(0, 0, 0, 1)"> Demo extends React.Component{ constructor(){ super() </span><span style="color: rgba(0, 0, 255, 1)">this</span>.state=<span style="color: rgba(0, 0, 0, 1)">{ name:</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">tom</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)"> } } componentDidMount(){ console.log(</span><span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">) } render(){ </span><span style="color: rgba(0, 0, 255, 1)">return</span> <div> <p>{<span style="color: rgba(0, 0, 255, 1)">this</span>.state.name}</p><span style="color: rgba(0, 0, 0, 1)"> {</span><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">当render函数执行的时候，它将会给组件实例对象上去挂载一个input属性</span><span style="color: rgba(0, 128, 0, 1)">*/</span><span style="color: rgba(0, 0, 0, 1)">} </span><input <span style="color: rgba(0, 0, 255, 1)">ref</span>={(input)=>{<span style="color: rgba(0, 0, 255, 1)">this</span>.input=input}} type=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">text</span><span style="color: rgba(128, 0, 0, 1)">"</span> /> </div><span style="color: rgba(0, 0, 0, 1)"> } } ReactDOM.render(</span><Demo/>,document.getElementById(<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">app</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(0, 0, 0, 1)">)) </span></script></pre> <p>在控制台可以查看到，挂载的input属性</p> <p></p> <p> 此时我们可以这样拿到input中的value值</p> <pre class="brush:csharp;gutter:true;"> componentDidMount(){ console.log(<span style="color: rgba(255, 0, 0, 1)">this.input.value</span>) } render(){ return <div> <p>{this.state.name}</p> {/*当render函数执行的时候，它将会给组件实例对象上去挂载一个input属性*/} <input ref={(input)=>{this.input=input}} type="text"<span style="color: rgba(255, 0, 0, 1)"> value='hello'</span> /> </div> }</pre> <p> 此时就可以输出value中的值</p> <p></p> </div> <!--conend--> <div class="p-2"></div> <div class="arcinfo my-3 fs-7 text-center"> <a href='/t/etagid89-0.html' class='tagbtn' target='_blank'>react</a> </div> <div class="p-2"></div> </div> <div class="p-2"></div> <!--xg--> <div class="lbox p-4 shadow-sm rounded-3"> <div class="boxtitle"><h2 class="fs-4">相关</h2></div> <hr> <div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-564770.html">react dom移动算法</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-562681.html">React组件重构：嵌套+继承 与 高阶组件</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-562967.html">React中嵌套组件与被嵌套组件的通信</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-561843.html">AntDesign(React)学习-15 组件定义、connect、interface</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-556539.html">初学ReactJS，写了一个RadioButtonList组件</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-554177.html">快速搭建react项目骨架（按需加载、redux、axios、项目级目录等等）</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-554505.html">react传值名称使用value可能出现死循环</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-543897.html">React Native bind函数</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-543802.html">React Native constructor方法内外this的区别</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-543176.html">使用 create-react-app 创建基于 ts 项目</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-541705.html">react源码解析17.context</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-541381.html">react源码解析14.手写hooks</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div> <!----> <!----> </div> <!--xgend--> </div> <div class="col-lg-3 col-12 p-0 ps-lg-2"> <!--box--> <!--boxend--> <!--<div class="p-2"></div>--> <!--box--> <div class="lbox p-4 shadow-sm rounded-3"> <div class="boxtitle pb-2"><h2 class="fs-4"><a href="#">标签</a></h2></div> <div class="clearfix"></div> <ul class="m-0 p-0 fs-7 r-tag"> </ul> <div class="clearfix"></div> </div> <!--box end--> </div> </div> </div> </main> <div class="p-2"></div> <footer> <div class="container-fluid p-0 bg-black"> <div class="container p-0 fs-8"> <p class="text-center m-0 py-2 text-white-50">一品网 <a class="text-white-50" href="https://beian.miit.gov.cn/" target="_blank">冀ICP备14022925号-6</a></p> </div> </div> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?6e3dd49b5f14d985cc4c6bdb9248f52b"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </footer> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.min.js"></script> </body> </html>