第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會(huì)有你想問的

僅 onChange 和映射數(shù)組中當(dāng)前輸入的值

僅 onChange 和映射數(shù)組中當(dāng)前輸入的值

我只是有一個(gè)映射輸入的數(shù)組。我想使用 useState 僅更改當(dāng)前輸入的值。以正常方式執(zhí)行此操作會(huì)更改映射數(shù)組中每個(gè)輸入的輸入，這是我不想要的。代碼示例 -const [text, setText] = useState("");comments.map((c) => (  <Row key={c._id}>    <Form      onSubmit={(e) => {        e.preventDefault();        addComment(comment._id, { text });        setText("");      }}    >      <InputGroup className="mb-3">        <FormControl          placeholder="add a comment"          aria-label="add a comment"          aria-describedby="inputGroup-sizing-default"          value={text}          onChange={(e) => setText(e.target.value)}        />      </InputGroup>    </Form>  </Row>));目前的方式我將更改所有映射的輸入的每個(gè)文本值，這是錯(cuò)誤的。對(duì)于簡單的問題我找不到答案，對(duì)此表示歉意。
查看完整描述

3 回答

?
人到中年有點(diǎn)甜

TA貢獻(xiàn)1895條經(jīng)驗(yàn) 獲得超7個(gè)贊

您需要使用數(shù)組而不是字符串作為文本狀態(tài)，因?yàn)槊總€(gè)評(píng)論都有狀態(tài)


const [text, setText] = useState(new Array(comments.length));


comments.map((c,i) => (

  <Row key={c._id}>

    <Form

      onSubmit={(e) => {

        e.preventDefault();

        addComment(comment._id, { text });

        setText(new Array(comments.length));

      }}

    >

      <InputGroup className="mb-3">

        <FormControl

          placeholder="add a comment"

          aria-label="add a comment"

          aria-describedby="inputGroup-sizing-default"

          value={text[i]}

          onChange={(e) => {

              const newText = [...text];

              newText[i] = e.target.value;

              setText(newText);

          }}

        />

      </InputGroup>

    </Form>

  </Row>

));

由于狀態(tài)是數(shù)組，現(xiàn)在您需要將值設(shè)置為text[i]，當(dāng)您更改狀態(tài)時(shí)，您需要更改元素上的i文本


查看完整回答
反對(duì) 回復(fù) 2023-08-24
?
紅顏莎娜

TA貢獻(xiàn)1842條經(jīng)驗(yàn) 獲得超13個(gè)贊

您需要更改狀態(tài)以在某處包含文本字符串?dāng)?shù)組，而不僅僅是單個(gè)字符串。然后使用正在迭代的元素的索引來確定要設(shè)置什么值以及要在更改時(shí)更改什么索引。


我認(rèn)為最優(yōu)雅的解決方案是更改comments對(duì)象以包含text屬性，例如：


{

  _id: 'somekey',

  text: ''

  // ...

}

然后映射它們：


const setCommentText = (text, i) => setComments(

  comments.map(

    (comment, i) => comment !== i ? comment : { ...comment, text }

  )

);

comments.map((c, i) => (

  <Row key={c._id}>

    <Form onSubmit={e => {

      e.preventDefault();

      addComment(comment._id, {c.text});

      setCommentText('', i);

    }}>

      <InputGroup className="mb-3" >

        <FormControl

          placeholder="add a comment"

          aria-label="add a comment"

          aria-describedby="inputGroup-sizing-default"

          value={c.text}

          onChange={e => setCommentText(e.target.value, i)}

        />

      </InputGroup>

    </Form>

  </Row>

));


查看完整回答
反對(duì) 回復(fù) 2023-08-24
?
墨色風(fēng)雨

TA貢獻(xiàn)1853條經(jīng)驗(yàn) 獲得超6個(gè)贊

試試這個(gè)方法


const [inputValues, setInputValues] = useState([]);


const updateValue = (value, index) => {


  const newInputValues = [... inputValues];

  newInputValues[index] = value

  setInputValues(newInputValues);


}




comments.map((c, index) => (

  <Row key={c._id}>

    ....

      <InputGroup className="mb-3">

        <FormControl

          .......

          value={inputValues[index] || ""}

          onChange={(e) => setInputValues(e.target.value)}

        />

      </InputGroup>

    </Form>

  </Row>

));


查看完整回答
反對(duì) 回復(fù) 2023-08-24
  • 3 回答
  • 0 關(guān)注
  • 233 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)