3.22. React forms and events

In this section we will discuss how to use forms in React.

HTML form elements are different from other DOM elements in React because form elements are born with some internal state.

In HTML, things like input, </span> </code> , and <code class="docutils literal notranslate"> <span class="pre"> <select> </span> </code> These types of form elements maintain their own state and are updated based on user <code class="docutils literal notranslate"> <span class="pre"> <input> </span> </code> . However, in React, mutable states are usually saved in the component’s state properties and can only be used with <code class="docutils literal notranslate"> <span class="pre"> setState() </span> </code> update the method. </p> <section id="id1"> <h2> <span class="section-number"> 3.22.1. </span> A simple example <a class="headerlink" href="#id1" title="Link to this heading"> ¶ </a> </h2> <p> In the example, we set up the input box <code class="docutils literal notranslate"> <span class="pre"> input </span> </code> value <code class="docutils literal notranslate"> <span class="pre"> value </span> <span class="pre"> = </span> <span class="pre"> {this.state.data} </span> </code> . We can update the state when the value of the input box changes. We can use it. <code class="docutils literal notranslate"> <span class="pre"> onChange </span> </code> events to monitor <code class="docutils literal notranslate"> <span class="pre"> input </span> </code> change and modify <code class="docutils literal notranslate"> <span class="pre"> state </span> </code> . </p> <section id="id2"> <h3> React instance <a class="headerlink" href="#id2" title="Link to this heading"> ¶ </a> </h3> <div class="highlight-default notranslate"> <div class="highlight"> <pre><span></span>classHelloMessageextendsReact.Component{constructor(props){super(props);this.state={value:'Hello Runoob!'};this.handleChange=this.handleChange.bind(this);}handleChange(event){this.setState({value:event.target.value});}render(){varvalue=this.state.value;return<div> <inputtype="text"value={value}onChange={this.handleChange}/> <h4>{value}</h4> </div>;}}ReactDOM.render(<HelloMessage/>,document.getElementById('example')); </pre> </div> </div> <p> The above code will render a value of <code class="docutils literal notranslate"> <span class="pre"> Hello </span> <span class="pre"> Runoob! </span> </code> of <code class="docutils literal notranslate"> <span class="pre"> input </span> </code> Element and pass through the <code class="docutils literal notranslate"> <span class="pre"> onChange </span> </code> the event response updates the value entered by the user. </p> </section> </section> <section id="id3"> <h2> <span class="section-number"> 3.22.2. </span> Example 2 <a class="headerlink" href="#id3" title="Link to this heading"> ¶ </a> </h2> <p> In the following example, we will show you how to use a form on a subcomponent. <code class="docutils literal notranslate"> <span class="pre"> onChange </span> </code> method will trigger <code class="docutils literal notranslate"> <span class="pre"> state </span> </code> and pass the updated value to the input box of the child component <code class="docutils literal notranslate"> <span class="pre"> value </span> </code> come up and re-render the interface. </p> <p> You need to create an event handle (handleChange) in the parent component as a <code class="docutils literal notranslate"> <span class="pre"> prop </span> </code> (updateStateProp) pass it to your subcomponents. </p> <section id="id4"> <h3> React instance <a class="headerlink" href="#id4" title="Link to this heading"> ¶ </a> </h3> <div class="highlight-default notranslate"> <div class="highlight"> <pre><span></span>classContentextendsReact.Component{render(){return<div> <inputtype="text"value={this.props.myDataProp}onChange={this.props.updateStateProp}/> <h4>{this.props.myDataProp}</h4> </div>;}}classHelloMessageextendsReact.Component{constructor(props){super(props);this.state={value:'Hello Runoob!'};this.handleChange=this.handleChange.bind(this);}handleChange(event){this.setState({value:event.target.value});}render(){varvalue=this.state.value;return<div> <ContentmyDataProp={value}updateStateProp={this.handleChange}></Content> </div>;}}ReactDOM.render(<HelloMessage/>,document.getElementById('example')); </pre> </div> </div> </section> </section> <section id="select"> <h2> <span class="section-number"> 3.22.3. </span> <code class="docutils literal notranslate"> <span class="pre"> Select </span> </code> drop-down menu <a class="headerlink" href="#select" title="Link to this heading"> ¶ </a> </h2> <p> In React, do not use the <code class="docutils literal notranslate"> <span class="pre"> selected </span> </code> property, while at the root <code class="docutils literal notranslate"> <span class="pre"> select </span> </code> use on the label <code class="docutils literal notranslate"> <span class="pre"> value </span> </code> property to represent the selected item. </p> <section id="id5"> <h3> React instance <a class="headerlink" href="#id5" title="Link to this heading"> ¶ </a> </h3> <div class="highlight-default notranslate"> <div class="highlight"> <pre><span></span><span class="n">classFlavorFormextendsReact</span><span class="o">.</span><span class="n">Component</span><span class="p">{</span><span class="n">constructor</span><span class="p">(</span><span class="n">props</span><span class="p">){</span><span class="nb">super</span><span class="p">(</span><span class="n">props</span><span class="p">);</span><span class="n">this</span><span class="o">.</span><span class="n">state</span><span class="o">=</span><span class="p">{</span><span class="n">value</span><span class="p">:</span><span class="s1">'coconut'</span><span class="p">};</span><span class="n">this</span><span class="o">.</span><span class="n">handleChange</span><span class="o">=</span><span class="n">this</span><span class="o">.</span><span class="n">handleChange</span><span class="o">.</span><span class="n">bind</span><span class="p">(</span><span class="n">this</span><span class="p">);</span><span class="n">this</span><span class="o">.</span><span class="n">handleSubmit</span><span class="o">=</span><span class="n">this</span><span class="o">.</span><span class="n">handleSubmit</span><span class="o">.</span><span class="n">bind</span><span class="p">(</span><span class="n">this</span><span class="p">);}</span><span class="n">handleChange</span><span class="p">(</span><span class="n">event</span><span class="p">){</span><span class="n">this</span><span class="o">.</span><span class="n">setState</span><span class="p">({</span><span class="n">value</span><span class="p">:</span><span class="n">event</span><span class="o">.</span><span class="n">target</span><span class="o">.</span><span class="n">value</span><span class="p">});}</span><span class="n">handleSubmit</span><span class="p">(</span><span class="n">event</span><span class="p">){</span><span class="n">alert</span><span class="p">(</span><span class="s1">'Your</span> <span class="n">favorite</span> <span class="n">flavor</span> <span class="ow">is</span><span class="p">:</span><span class="s1">'+this.state.value);event.preventDefault();}render(){return(<formonSubmit=</span><span class="si">{this.handleSubmit}</span><span class="s1">></span> <span class="o"><</span><span class="n">label</span><span class="o">></span> <span class="n">Choose</span> <span class="n">your</span> <span class="n">favorite</span> <span class="n">website</span> <span class="o"><</span><span class="n">selectvalue</span><span class="o">=</span><span class="p">{</span><span class="n">this</span><span class="o">.</span><span class="n">state</span><span class="o">.</span><span class="n">value</span><span class="p">}</span><span class="n">onChange</span><span class="o">=</span><span class="p">{</span><span class="n">this</span><span class="o">.</span><span class="n">handleChange</span><span class="p">}</span><span class="o">></span> <span class="o"><</span><span class="n">optionvalue</span><span class="o">=</span><span class="s2">"gg"</span><span class="o">></span><span class="n">Google</span><span class="o"></</span><span class="n">option</span><span class="o">></span> <span class="o"><</span><span class="n">optionvalue</span><span class="o">=</span><span class="s2">"rn"</span><span class="o">></span><span class="n">Runoob</span><span class="o"></</span><span class="n">option</span><span class="o">></span> <span class="o"><</span><span class="n">optionvalue</span><span class="o">=</span><span class="s2">"tb"</span><span class="o">></span><span class="n">Taobao</span><span class="o"></</span><span class="n">option</span><span class="o">></span> <span class="o"><</span><span class="n">optionvalue</span><span class="o">=</span><span class="s2">"fb"</span><span class="o">></span><span class="n">Facebook</span><span class="o"></</span><span class="n">option</span><span class="o">></span> <span class="o"></</span><span class="n">select</span><span class="o">></span> <span class="o"></</span><span class="n">label</span><span class="o">></span> <span class="o"><</span><span class="n">inputtype</span><span class="o">=</span><span class="s2">"submit"</span><span class="n">value</span><span class="o">=</span><span class="s2">"submit to"</span><span class="o">/></span> <span class="o"></</span><span class="n">form</span><span class="o">></span><span class="p">);}}</span><span class="n">ReactDOM</span><span class="o">.</span><span class="n">render</span><span class="p">(</span><span class="o"><</span><span class="n">FlavorForm</span><span class="o">/></span><span class="p">,</span><span class="n">document</span><span class="o">.</span><span class="n">getElementById</span><span class="p">(</span><span class="s1">'example'</span><span class="p">));</span> </pre> </div> </div> </section> </section> <section id="id6"> <h2> <span class="section-number"> 3.22.4. </span> Multiple forms <a class="headerlink" href="#id6" title="Link to this heading"> ¶ </a> </h2> <p> When you have to deal with multiple <code class="docutils literal notranslate"> <span class="pre"> input </span> </code> element, you can add a <code class="docutils literal notranslate"> <span class="pre"> name </span> </code> property to make the handler function based on the <code class="docutils literal notranslate"> <span class="pre"> event.target.name </span> </code> to choose what to do. </p> <section id="id7"> <h3> React instance <a class="headerlink" href="#id7" title="Link to this heading"> ¶ </a> </h3> <div class="highlight-default notranslate"> <div class="highlight"> <pre><span></span>classReservationextendsReact.Component{constructor(props){super(props);this.state={isGoing:true,numberOfGuests:2};this.handleInputChange=this.handleInputChange.bind(this);}handleInputChange(event){consttarget=event.target;constvalue=target.type==='checkbox'?target.checked:target.value;constname=target.name;this.setState({[name]:value});}render(){return(<form> <label> Do you want to leave: <inputname="isGoing"type="checkbox"checked={this.state.isGoing}onChange={this.handleInputChange}/> </label> <br/> <label> Visitor count: <inputname="numberOfGuests"type="number"value={this.state.numberOfGuests}onChange={this.handleInputChange}/> </label> </form>);}} </pre> </div> </div> </section> </section> <section id="id8"> <h2> <span class="section-number"> 3.22.5. </span> React event <a class="headerlink" href="#id8" title="Link to this heading"> ¶ </a> </h2> <p> The following example shows how to use the <code class="docutils literal notranslate"> <span class="pre"> onClick </span> </code> event to modify the data: </p> <section id="id9"> <h3> React instance <a class="headerlink" href="#id9" title="Link to this heading"> ¶ </a> </h3> <div class="highlight-default notranslate"> <div class="highlight"> <pre><span></span>classHelloMessageextendsReact.Component{constructor(props){super(props);this.state={value:'Hello Runoob!'};this.handleChange=this.handleChange.bind(this);}handleChange(event){this.setState({value:'Rookie Tutorial'})}render(){varvalue=this.state.value;return<div> <buttononClick={this.handleChange}>Click me</button> <h4>{value}</h4> </div>;}}ReactDOM.render(<HelloMessage/>,document.getElementById('example')); </pre> </div> </div> <p> When you need to update the parent component from the child component <code class="docutils literal notranslate"> <span class="pre"> state </span> </code> need to create an event handle (handleChange) in the parent component as a <code class="docutils literal notranslate"> <span class="pre"> prop </span> </code> (updateStateProp) pass it to your subcomponents. Examples are as follows: </p> </section> <section id="id10"> <h3> React instance <a class="headerlink" href="#id10" title="Link to this heading"> ¶ </a> </h3> <div class="highlight-default notranslate"> <div class="highlight"> <pre><span></span>classContentextendsReact.Component{render(){return<div> <buttononClick={this.props.updateStateProp}>Click me</button> <h4>{this.props.myDataProp}</h4> </div>}}classHelloMessageextendsReact.Component{constructor(props){super(props);this.state={value:'Hello Runoob!'};this.handleChange=this.handleChange.bind(this);}handleChange(event){this.setState({value:'Rookie Tutorial'})}render(){varvalue=this.state.value;return<div> <ContentmyDataProp={value}updateStateProp={this.handleChange}></Content> </div>;}}ReactDOM.render(<HelloMessage/>,document.getElementById('example')); </pre> </div> </div> </section> </section> </section> </div></div> </div> <div class="panel-footer"> <div class="row"> <div class="col-sm-12" style="overflow: hidden; text-overflow:ellipsis; white-space: nowrap; display: block"> 文章链接 ： <a class="text-primary" href="/tutorial/k3931/" title="3.22. React forms and events ">3.22. React forms and events </a> </div> </div> </div> </div> </div> <div class="col-sm-3"> <div class="catalog_div col-sm-12"> <div class="card mb-4 shadow-sm "> <div class="card-header"> <a class="d-flex align-items-center text-decoration-none "> <b>Web框架 </b>  <span class="badge bg-primary rounded-pill">946</span> </a> <p> <small class="text-muted"><div class="body" role="main"> <section id="web"> </section> </div></small> </p> </div> <ul class="list-group list-group-flush"> <li class="list-group-item d-flex justify-content-between align-items-center"> <a href="/catalog/kb01/" class="text-decoration-none"> 1. Angularjs2 <span class="badge bg-primary rounded-pill">8</span> </a> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <a href="/catalog/ka01/" class="text-decoration-none"> 1. SVG tutorial <span class="badge bg-primary rounded-pill">19</span> </a> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <a href="/catalog/kc01/" class="text-decoration-none"> 1. Memcached <span class="badge bg-primary rounded-pill">20</span> </a> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <a href="/catalog/kh01/" class="text-decoration-none"> 1. C# tutorial <span class="badge bg-primary rounded-pill">61</span> </a> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <a href="/catalog/kd01/" class="text-decoration-none"> 1. Sqlite <span class="badge bg-primary rounded-pill">47</span> </a> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <a href="/catalog/kh02/" class="text-decoration-none"> 2. Go <span class="badge bg-primary rounded-pill">43</span> </a> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <a href="/catalog/kd02/" class="text-decoration-none"> 2. Docker <span class="badge bg-primary rounded-pill">59</span> </a> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <a href="/catalog/kb02/" class="text-decoration-none"> 2. Vue3 <span class="badge bg-primary rounded-pill">19</span> </a> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <a href="/catalog/ka02/" class="text-decoration-none"> 2. Servlet <span class="badge bg-primary rounded-pill">21</span> </a> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <a href="/catalog/kb03/" class="text-decoration-none"> <b> 3. React </b> <span class="badge bg-primary rounded-pill">23</span> </a> <li class="list-group-item d-flex justify-content-between align-items-center ms-3"> <a href="/tutorial/k2634/" class="text-decoration-none"> 3.20. React componentWillUnmount() method </a> </li> <li class="list-group-item d-flex justify-content-between align-items-center ms-3"> <a href="/tutorial/k9845/" class="text-decoration-none"> 3.11. React component API </a> </li> <li class="list-group-item d-flex justify-content-between align-items-center ms-3"> <a href="/tutorial/k0117/" class="text-decoration-none"> 3.3. React element rendering </a> </li> <li class="list-group-item d-flex justify-content-between align-items-center ms-3"> <a href="/tutorial/k6175/" class="text-decoration-none"> 3.8. React event handling </a> </li> <li class="list-group-item d-flex justify-content-between align-items-center ms-3"> <a href="/tutorial/k9811/" class="text-decoration-none"> 3.6. React State </a> </li> <li class="list-group-item d-flex justify-content-between align-items-center ms-3"> <a href="/tutorial/k3931/" class="text-decoration-none"> > 3.22. React forms and events </a> </li> <li class="list-group-item d-flex justify-content-between align-items-center ms-3"> <a href="/tutorial/k5300/" class="text-decoration-none"> 3.10. React list & Keys </a> </li> <li class="list-group-item d-flex justify-content-between align-items-center ms-3"> <a href="/tutorial/k4469/" class="text-decoration-none"> 3.2. React installation </a> </li> <li class="list-group-item d-flex justify-content-between align-items-center ms-3"> <a href="/tutorial/k1769/" class="text-decoration-none"> 3.23. React Refs </a> </li> <li class="list-group-item d-flex justify-content-between align-items-center ms-3"> <a href="/tutorial/k1710/" class="text-decoration-none"> 3.1. React tutorial </a> </li> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <a href="/catalog/ka03/" class="text-decoration-none"> 3. SOAP tutorial <span class="badge bg-primary rounded-pill">10</span> </a> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <a href="/catalog/kc03/" class="text-decoration-none"> 3. Android <span class="badge bg-primary rounded-pill">18</span> </a> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <a href="/catalog/kd03/" class="text-decoration-none"> 3. Mongodb <span class="badge bg-primary rounded-pill">44</span> </a> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <a href="/catalog/kh03/" class="text-decoration-none"> 3. Kotlin <span class="badge bg-primary rounded-pill">18</span> </a> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <a href="/catalog/kh04/" class="text-decoration-none"> 4. Lua <span class="badge bg-primary rounded-pill">31</span> </a> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <a href="/catalog/kd04/" class="text-decoration-none"> 4. MySQL tutorial <span class="badge bg-primary rounded-pill">35</span> </a> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <a href="/catalog/kc04/" class="text-decoration-none"> 4. Appml <span class="badge bg-primary rounded-pill">12</span> </a> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <a href="/catalog/kh05/" class="text-decoration-none"> 5. Perl <span class="badge bg-primary rounded-pill">45</span> </a> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <a href="/catalog/kd05/" class="text-decoration-none"> 5. Postgresql <span class="badge bg-primary rounded-pill">41</span> </a> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <a href="/catalog/ka05/" class="text-decoration-none"> web <span class="badge bg-primary rounded-pill">15</span> </a> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <a href="/catalog/ka06/" class="text-decoration-none"> 5. Web Services tutorial <span class="badge bg-primary rounded-pill">6</span> </a> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <a href="/catalog/kh06/" class="text-decoration-none"> 6. Ruby <span class="badge bg-primary rounded-pill">42</span> </a> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <a href="/catalog/kc06/" class="text-decoration-none"> 6. Design-pattern <span class="badge bg-primary rounded-pill">35</span> </a> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <a href="/catalog/kc07/" class="text-decoration-none"> 7. Django <span class="badge bg-primary rounded-pill">18</span> </a> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <a href="/catalog/kh07/" class="text-decoration-none"> 7. Rust <span class="badge bg-primary rounded-pill">22</span> </a> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <a href="/catalog/ka07/" class="text-decoration-none"> 6. WSDL tutorial <span class="badge bg-primary rounded-pill">8</span> </a> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <a href="/catalog/kc08/" class="text-decoration-none"> 8. Foundation <span class="badge bg-primary rounded-pill">39</span> </a> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <a href="/catalog/kc09/" class="text-decoration-none"> 9. Ios <span class="badge bg-primary rounded-pill">43</span> </a> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <a href="/catalog/ka09/" class="text-decoration-none"> 8. Css3 <span class="badge bg-primary rounded-pill">26</span> </a> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <a href="/catalog/kh09/" class="text-decoration-none"> 9. Swift <span class="badge bg-primary rounded-pill">44</span> </a> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <a href="/catalog/ka12/" class="text-decoration-none"> 11. HTML tutorial-(HTML5 Standard) <span class="badge bg-primary rounded-pill">54</span> </a> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <a href="/catalog/ka13/" class="text-decoration-none"> 12. Http <span class="badge bg-primary rounded-pill">6</span> </a> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <a href="/catalog/kc13/" class="text-decoration-none"> 13. Regex <span class="badge bg-primary rounded-pill">6</span> </a> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <a href="/catalog/kc14/" class="text-decoration-none"> 14. Regexp <span class="badge bg-primary rounded-pill">8</span> </a> </li> </ul> </div> </div> <div class="catalog_div col-sm-12"> <div class="card mb-4 shadow-sm "> <div class="card-header"> <a class="d-flex align-items-center text-decoration-none "> 《地理信息系统原理、技术与方法》  <span class="badge bg-primary rounded-pill">97</span> </a> <p> <small class="text-muted"><article class="bd-article"> <section id="id1"> <p> 最近几年来，地理信息系统无论是在理论上还是应用上都处在一个飞速发展的阶段。 GIS被应用于多个领域的建模和决策支持，如城市管理、区划、环境整治等等，地理信息成为信息时代重要的组成部分之一； “数字地球”概念的提出，更进一步推动了作为其技术支撑的GIS的发展。 与此同时，一些学者致力于相关的理论研究，如空间感知、空间数据误差、空间关系的形式化等等。 这恰好说明了地理信息系统作为应用技术和学科的两个方面，并且这两个方面构成了相互促进的发展过程。 </p> </section> </article></small> </p> </div> <ul class="list-group list-group-flush"> <li class="list-group-item d-flex justify-content-between align-items-center"> <a href="/catalog/k101/" class="text-decoration-none"> 1. Introduction to geographic information system <span class="badge bg-primary rounded-pill">6</span> </a> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <a href="/catalog/k102/" class="text-decoration-none"> 2. From the Real World to the Bit World <span class="badge bg-primary rounded-pill">3</span> </a> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <a href="/catalog/k103/" class="text-decoration-none"> 3. Spatial Data Model <span class="badge bg-primary rounded-pill">7</span> </a> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <a href="/catalog/k104/" class="text-decoration-none"> 4. 空间参照系统和 地图投影 <span class="badge bg-primary rounded-pill">5</span> </a> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <a href="/catalog/k105/" class="text-decoration-none"> 5. Data in GIS <span class="badge bg-primary rounded-pill">3</span> </a> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <a href="/catalog/k106/" class="text-decoration-none"> 6. Spatial data acquisition <span class="badge bg-primary rounded-pill">2</span> </a> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <a href="/catalog/k107/" class="text-decoration-none"> 7. Spatial Data Management <span class="badge bg-primary rounded-pill">6</span> </a> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <a href="/catalog/k108/" class="text-decoration-none"> 8. Spatial analysis <span class="badge bg-primary rounded-pill">8</span> </a> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <a href="/catalog/k109/" class="text-decoration-none"> 9. 数字地形模型（ DTM ）与地形分析 <span class="badge bg-primary rounded-pill">5</span> </a> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <a href="/catalog/k110/" class="text-decoration-none"> 10. 空间建模与 空间决策支持 <span class="badge bg-primary rounded-pill">6</span> </a> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <a href="/catalog/k111/" class="text-decoration-none"> 11. Spatial data representation and map making <span class="badge bg-primary rounded-pill">6</span> </a> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <a href="/catalog/k112/" class="text-decoration-none"> 12. 3S Integration Technology <span class="badge bg-primary rounded-pill">5</span> </a> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <a href="/catalog/k113/" class="text-decoration-none"> 13. 网络地理信息系统 <span class="badge bg-primary rounded-pill">3</span> </a> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <a href="/catalog/k114/" class="text-decoration-none"> 14. Examples of Geographic Information System Application <span class="badge bg-primary rounded-pill">8</span> </a> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <a href="/catalog/k115/" class="text-decoration-none"> 15. Organization and Management of Geographic Information System Application Projects <span class="badge bg-primary rounded-pill">9</span> </a> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <a href="/catalog/k116/" class="text-decoration-none"> 16. Geographic Information system Software Engineering Technology <span class="badge bg-primary rounded-pill">6</span> </a> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <a href="/catalog/k117/" class="text-decoration-none"> 17. Geographic Information System Standards <span class="badge bg-primary rounded-pill">3</span> </a> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <a href="/catalog/k118/" class="text-decoration-none"> 18. Geographic Information System and Society <span class="badge bg-primary rounded-pill">3</span> </a> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <a href="/catalog/k119/" class="text-decoration-none"> 19. Earth Information Science and Digital Earth <span class="badge bg-primary rounded-pill">3</span> </a> </li> </ul> </div> </div> <div class="catalog_div col-sm-12"> <div class="card mb-4 shadow-sm "> <div class="card-header"> <a class="d-flex align-items-center text-decoration-none "> WEB基础  <span class="badge bg-primary rounded-pill">289</span> </a> <p> <small class="text-muted"><div class="body" role="main"> <section id="web"> </section> </div></small> </p> </div> <ul class="list-group list-group-flush"> <li class="list-group-item d-flex justify-content-between align-items-center"> <a href="/catalog/kc02/" class="text-decoration-none"> 2. ADO tutorial <span class="badge bg-primary rounded-pill">23</span> </a> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <a href="/catalog/ka04/" class="text-decoration-none"> 4. W3C tutorial <span class="badge bg-primary rounded-pill">16</span> </a> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <a href="/catalog/kc05/" class="text-decoration-none"> 5. Data-structures <span class="badge bg-primary rounded-pill">31</span> </a> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <a href="/catalog/kh08/" class="text-decoration-none"> 8. Scala <span class="badge bg-primary rounded-pill">41</span> </a> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <a href="/catalog/ka08/" class="text-decoration-none"> 7. Bootstrap5 <span class="badge bg-primary rounded-pill">37</span> </a> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <a href="/catalog/kc10/" class="text-decoration-none"> 10. Markdown <span class="badge bg-primary rounded-pill">10</span> </a> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <a href="/catalog/ka10/" class="text-decoration-none"> 9. Echarts <span class="badge bg-primary rounded-pill">12</span> </a> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <a href="/catalog/kc11/" class="text-decoration-none"> 11. Maven <span class="badge bg-primary rounded-pill">20</span> </a> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <a href="/catalog/ka11/" class="text-decoration-none"> 10. Font-awesome <span class="badge bg-primary rounded-pill">17</span> </a> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <a href="/catalog/kc12/" class="text-decoration-none"> 12. RDF tutorial <span class="badge bg-primary rounded-pill">11</span> </a> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <a href="/catalog/ka14/" class="text-decoration-none"> 13. Sass <span class="badge bg-primary rounded-pill">15</span> </a> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> <a href="/catalog/kc15/" class="text-decoration-none"> 15. XML Schema tutorial <span class="badge bg-primary rounded-pill">56</span> </a> </li> </ul> </div> </div> </div> </div> </div> </div> <footer id="copyrights"> <div class="container"> <p>Powered by Django & PostgreSQL (with PostGIS)</p> </div> </footer> </body> </html>