Reagovat: Jak vymazat TextArea?

Question 1

Vím, jak kontrolovat vstup component. Ale toto chování jsem nechápala.
Mám antd formulář s textarea.

<Item
  name='tags'
  className='input-item tag-helper'
  label='These are tags that appear on your NFT'
>
  <TextArea value={text} className='big-text-area tag-text-area' placeholder='Enter a tag...' onKeyDown={addTag} />
</Item>

TextArea zodpovědný za přidání kategorie. Takže když jsem se napsat něco ve vstupní ovládá useState variabilní a po prostoru stiskněte tlačítko, přidá se do pole s tagy. Po prostoru stiskněte tlačítko vstup má vymazat, ale nic se neděje.
Můj kód vypadá takto:

  const addTag = value => {
    setText(value.target.value)
    if (value.keyCode === 32) {
      setTags([...tags, text])
      setText('')
    }
  }

V předchozí verzi:

const addTag = value => {
  if (value.keyCode === 32) {
    setTags([...tags, text])
    setText('')
  }
}

<Item
  name='tags'
  className='input-item tag-helper'
  label='These are tags that appear on your NFT'
>
  <TextArea value={text} className='big-text-area tag-text-area' placeholder='Enter a tag...' onKeyDown={addTag} onChange={v => setText(v.target.value)} />
</Item>

Také jsem si myslel, že je To dobrý nápad vyzkoušet nastavení textu přes useEffecttak jsem experimentoval a přidal poslední func:

useEffect(() => {
    setText('')
}, [tags])

Může mi někdo říct, mi, co dělám špatně? Proč nemůžu vymazat textArea poté, co jsem stiskněte tlačítko "prostor"?

Question 2

To by mohlo být něco o tom, že nejste složení onChange rekvizita TextArea takže to není v řízeném režimu a je ignoruje value prop jste kolem. Můžete zkusit toto:

<TextArea value={text} onChange={() => {}} className='big-text-area tag-text-area' placeholder='Enter a tag...' onKeyDown={addTag} />

nebo můžete to udělat v onChange

const onChange = (e) => {
  const currentText = e.target.value;
  if(currentText.length && currentText[currentText.length - 1] === " "){
    setTags([...tags, text]);
    setText("");
  } else {
    setText(e.target.value);
  }
}

a nechat TextArea takhle

<TextArea value={text} onChange={onChange} className='big-text-area tag-text-area' placeholder='Enter a tag...' />

Question 3

Přidání události.přetrvávají(); pracoval pro mě, pro zúčtování textarea, s ohledem na kategorie seznam, to závisí zcela závisí na tom, co vaše počáteční stav je a jak se vám daří s tagy pole.

  const [text, setText] = useState('');
  const [tags, setTags] = useState([]);

  const addTag = event => {
      event.persist();
      console.log(tags);
      setText(event.value);
      if (event.keyCode === 32) { 
          setText('');   
          setTags((previousTags) => {
             return [...previousTags,event.target.value];
          });        
      }
  };

 // textarea are I used 
<textarea value={text} className='big-text-area tag-text-area' placeholder='Enter a tag...' onChange={addTag} onKeyDown={addTag} />

Question 4

Vyřešil jsem úkol. Nemůžu ovládat součástí, protože to bylo zabalené v Form.ItemPoložka má vlastní stát, tak To rušit ovládat Inputpřímo. Tady jsou změny:

<TextArea value={text} onChange={v => setText(v.target.value)} onKeyUp={addTag} className='big-text-area tag-text-area' placeholder='Enter a tag...' />

const addTag = value => {
  if (value.keyCode === 32) {
    setTags([...tags, text])
    setText('')
  }
}

Gabry Hawk · Answer 1 · 2021-11-17T18:31:59

To by mohlo být něco o tom, že nejste složení onChange rekvizita TextArea takže to není v řízeném režimu a je ignoruje value prop jste kolem. Můžete zkusit toto:

<TextArea value={text} onChange={() => {}} className='big-text-area tag-text-area' placeholder='Enter a tag...' onKeyDown={addTag} />

nebo můžete to udělat v onChange

const onChange = (e) => {
  const currentText = e.target.value;
  if(currentText.length && currentText[currentText.length - 1] === " "){
    setTags([...tags, text]);
    setText("");
  } else {
    setText(e.target.value);
  }
}

a nechat TextArea takhle

<TextArea value={text} onChange={onChange} className='big-text-area tag-text-area' placeholder='Enter a tag...' />

Píšu kód ", jako v tutoriálu" (viz předchozí verzi zákoníku). Ale hlavní problém je setText() v onChangeTo volání po onKeyDowntakže můj proměnná přepíše se stará hodnota.
Zkoušeli jste s prázdnou onChange jak jsem psát odpověď?

mazy581 · Answer 2 · 2021-11-17T17:46:08

Přidání události.přetrvávají(); pracoval pro mě, pro zúčtování textarea, s ohledem na kategorie seznam, to závisí zcela závisí na tom, co vaše počáteční stav je a jak se vám daří s tagy pole.

  const [text, setText] = useState('');
  const [tags, setTags] = useState([]);

  const addTag = event => {
      event.persist();
      console.log(tags);
      setText(event.value);
      if (event.keyCode === 32) { 
          setText('');   
          setTags((previousTags) => {
             return [...previousTags,event.target.value];
          });        
      }
  };

 // textarea are I used 
<textarea value={text} className='big-text-area tag-text-area' placeholder='Enter a tag...' onChange={addTag} onKeyDown={addTag} />

Bohužel, To není práce pro mě, protože To je přidání poslední symbol pro pole (a tento symbol je "prostor").
Ahoj, to je dobré vidět, že byl vyřešen problém, mám také aktualizováno odpověď, nyní se aktualizuje seznam ihned, jak si stiskněte prostor, a také poskytnout správné hodnoty.

Iangyl · Answer 3 · 2021-11-17T20:00:19

Vyřešil jsem úkol. Nemůžu ovládat součástí, protože to bylo zabalené v Form.ItemPoložka má vlastní stát, tak To rušit ovládat Inputpřímo. Tady jsou změny:

<TextArea value={text} onChange={v => setText(v.target.value)} onKeyUp={addTag} className='big-text-area tag-text-area' placeholder='Enter a tag...' />

const addTag = value => {
  if (value.keyCode === 32) {
    setTags([...tags, text])
    setText('')
  }
}

Reagovat: Jak vymazat TextArea?

Otázka

V jiných jazycích

Tato stránka je v jiných jazycích

Populární v této kategorii

Oblíbené položky v této kategorii