添加文本輸入字段以添加特定學生的標簽

Question

在獲取 api 即https://api.hatchways.io/assessment/students后，執行一些步驟來創建匹配的網站頁面。 我被困在一個步驟中，我們必須添加一個文本輸入字段來為特定學生添加標簽。 這是顯示該怎么做的視頻。

https://storage.googleapis.com/hatchways-app.appspot.com/assessments/data/frontend/f-3/99398f01-c407-4e28-a8bc-ccaa440b6353/f-2%20part5.webm 。

請檢查下面的鏈接，其中顯示了 pdf 文件，顯示了要完成的完整評估。

https://storage.googleapis.com/hatchways-app.appspot.com/assessments/data/instructions/f-3/Front-end%20Assessment%20-%20Student%20Profiles-TLXROZXQZRK8IRJ2IUPT.pdf

Answer 1

<html>
    <head>
        
        <title>Tags</title>
        <style>
   #tags_here{padding: 5px;
  font-size: 16px;
  border: 0;
  outline: none;
  font-family: 'Rubik';
  color: #333;
  flex: 1;
    
    
}
input {
  outline: 0;
  border-width: 0 0 2px;
  border-color: blue
}
input:focus {
  border-color: green
}
.tag_text {
    
    
  margin: 5px;
  padding: 5px 6px;
  border: 1px solid #ccc;
  border-radius: 3px;
  background: #eee;
  
  color: #333;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 1px 1px #fff;
  cursor: default;
  
}
.del{
    font-size:25px;
    font-weight:bold;
}
</style>
    </head>
    <body>

Input tags here: <br/> <input type="text" id="tags" placeholder="Add a tag" onkeydown="search()">
<div id="tags_here"></div> 
    <script>
    var text = document.getElementById("tags");
    
         function search () 
         
         {
             if(event.keyCode == 13) {
                 
                 var x = Object.assign(document.createElement('SPAN'), { className: 'tag_text' });
                 

                   var el = Object.assign(document.createElement('SPAN'), { className: 'del' }, {textContent: '×'});

 console.log(el)

                 
 x.innerHTML = text.value + '&nbsp;' + '&nbsp;';
  
  document.getElementById('tags_here').appendChild(x);
x.appendChild(el);
        document.getElementById("tags").value ="";
        
        check();
    }
    }
            
        function check () {
            var remove = document.querySelectorAll(".del");
            
        for (var i = 0; i < remove.length; i++) {
        remove[i].addEventListener("click", function () {
            //Add function here
            this.parentNode.remove();
            
            
        }); 
        }
        }
        
    </script>
    </body>

</html>

不能完全按照我在那個視頻中看到的那樣做，但可以給你創建標簽的代碼，我最近也做了，雖然我也是初學者，但我試過了，你可以在這里看到它https://codepen.io/gauntletww/pen /JjpPgLV並且我無法截取代碼，因為我目前在 android 上，任何對我的反饋也將不勝感激。

Answer 2

在 App.js 中， Student組件將具有如下的addTag

<Student key={student.id} data={student} addTag={(e) => addTag(e, student)} />


const addTag = (e, student) => {
  const { tags } = student;
  if(e.key === "Enter" && e.target.value) {
    if(student.tags.indexOf(e.target.value) != -1) {
      tags.push(e.target.value);
      e.target.value = "";
      setStudents([...students, student]);
    }
  }
};

更新后的學生數據將導致Student組件重新呈現，該組件將顯示在student.tag中添加的新標簽

在Student.jsx中， map通過標簽顯示在Student組件中

添加文本輸入字段以添加特定學生的標簽

問題描述

2 個解決方案

解決方案1
0 2022-04-30 05:31:13

解決方案2
-1 2022-04-29 19:01:20

添加文本輸入字段以添加特定學生的標簽

問題描述

2 個解決方案

解決方案1 0 2022-04-30 05:31:13

解決方案2 -1 2022-04-29 19:01:20

解決方案1
0 2022-04-30 05:31:13

解決方案2
-1 2022-04-29 19:01:20