प्रतिक्रिया जेएस और रेडक्स का उपयोग करके एक साधारण नोट्स एप्लिकेशन है

मेरे पास सीएसएस गुणों के साथ एक नोट कार्ड घटक है:

NoteItem.js

const NoteItem = ({ text, date, index }) => {
  const dispatch = useDispatch();

  const deleteNoteItem = () => {
    dispatch(deleteNote(index));
  };

  return (
    <div className={"note"}>
      <span>{text}</span>
      <div className="note-footer">
        <small>{date}</small>
        <MdDeleteForever
          className={"delete-icon"}
          size={"1.3em"}
          onClick={deleteNoteItem}
        />
      </div>
    </div>
  );
};

सीएसएस गुण

@import url('https://fonts.googleapis.com/css2?family=M+PLUS+2&display=swap');

body {
  margin: 0;
  font-family: 'M PLUS 2', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
  monospace;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dark-mode {
  background-color: black;
}

.dark-mode h1 {
  color: white;
}

.container {
  max-width: 960px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 15px;
  padding-left: 15px;
  min-height: 100vh;
}

.notes-list {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(
        auto-fill,
    minmax(250px, 1fr)
    );
}

.note.new {
  background-color: #67d7cc;
}

textarea {
  border: none;
  resize: none;
  background-color: #67d7cc;
}

textarea:focus {
  outline: none;
}

.save {
  background-color: #e1e1e1;
  border: none;
  border-radius: 15px;
  padding: 5px 10px 5px 10px;
}

.save:hover {
  background-color: #ededed;
  cursor: pointer;
}

.note {
  background-color: #fef68a;
  border-radius: 10px;
  padding: 1rem;
  min-height: 170px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  white-space: pre-wrap;
}

.note-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.delete-icon {
  cursor: pointer;
}

.search {
  display: flex;
  align-items: center;
  background-color: rgb(233, 233, 233);
  border-radius: 10px;
  padding: 5px;
  margin-bottom: 1.5em;
}

.search input {
  border: none;
  background-color: rgb(233, 233, 233);
  width: 100%;
}

.search input:focus {
  outline: none;
}

NewItem.js

  const NewItem = () => {
    const [input, setInput] = useState("");

    const dispatch = useDispatch();

    const getCurrentDate = () => {
      const date = new Date();
      return `${date.getDate()}-${
        date.getMonth() + 1
      }-${date.getFullYear()}  ${date.getHours()}:${date.getMinutes()}`;
    };

    const add = () => {
      dispatch(
        addNote({
          text: input,
          date: getCurrentDate()
        })
      );

      setInput("")
    };

    return (
      <div className={"note new"}>
        <textarea
          rows={"8"}
          cols={"10"}
          placeholder={"Type to add a note..."}
          value={input}
          onChange={(e) => setInput(e.target.value)}
        />
        <div className={"note-footer"}>
          <small>{200 - input.length} remaining</small>
          <button className="save" onClick={add}>
            Save
          </button>
        </div>
      </div>
    );
};

अगर मैं कार्ड घटक में स्पैन टैग में टेक्स्ट को हार्डकोड करता हूं, तो कार्ड ऐसा लगता है जैसे इसे माना जाता है

Card item

लेकिन अगर मैं रेडक्स घटक में एक नया कार्ड बनाने के लिए तर्क को एकीकृत करता हूं तो कार्ड इस तरह से प्रस्तुत किया जाता है:

Card item using redux

क्या समस्या हो सकती है? मुझे यहां ऐसा कुछ नहीं मिला है। अग्रिम में धन्यवाद!

0
StrahSvid19 21 नवम्बर 2021, 19:03
मुझे लगता है कि NoteItem जिसे आप "कार्ड" कह रहे हैं? वापसी विवरण (console.log(text)) से पहले NoteItem घटक में text को लॉग करने का प्रयास करें। मुझे संदेह है कि आपके redux मान में रिक्त स्थान नहीं हैं। या इसके विपरीत, यदि आप लोरेम इप्सम टेक्स्ट को रिक्त स्थान के बजाय अर्धविराम के साथ हार्ड कोड करते हैं, तो यह संभवतः खराब भी दिखाई देगा।
 – 
user2740650
21 नवम्बर 2021, 19:14
वैसे, आप अपने टाइमस्टैम्प के दिन, महीने और मिनट के हिस्सों को 0 के साथ String.prototype.padStart या कुछ और का उपयोग करके पैड करना चाह सकते हैं।
 – 
DustInCompetent
21 नवम्बर 2021, 19:33

2 जवाब

सबसे बढ़िया उत्तर

अतिप्रवाह से बचने के लिए आपके नोट का span रिक्त स्थान पर स्वतः टूट जाता है। ऐसा लगता है कि आपने अपने दूसरे उदाहरण में कोई सफेद जगह नहीं डाली है, जिससे अतिप्रवाह हो रहा है।

वैसे भी स्पैन के किनारे को तोड़ने के लिए, अपने नोट क्लास में css प्रॉपर्टी overflow-wrap: break-word; जोड़ें।

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Text/Wrapping_Text#break_long_words

यह रही फिडल मैंने https://jsfiddle.net/febargph/ में बदलाव का परीक्षण किया

0
DustInCompetent 21 नवम्बर 2021, 19:48
यह काम करता है, बहुत बहुत धन्यवाद
 – 
StrahSvid19
21 नवम्बर 2021, 21:58

इस प्रकार एक लंबी स्ट्रिंग जिसमें कोई रिक्त स्थान नहीं है <span> के अंदर व्यवहार करता है। इसमें रिक्त स्थान जोड़ें, यह भी मदद करेगा css प्रॉपर्टी word-break: https://developer. mozilla.org/en-US/docs/Web/CSS/word-break

0
CasperCarver 21 नवम्बर 2021, 19:26