亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

僅 onChange 和映射數組中當前輸入的值

僅 onChange 和映射數組中當前輸入的值

喵喵時光機 2023-08-24 15:45:32
我只是有一個映射輸入的數組。我想使用 useState 僅更改當前輸入的值。以正常方式執行此操作會更改映射數組中每個輸入的輸入,這是我不想要的。代碼示例 -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>));目前的方式我將更改所有映射的輸入的每個文本值,這是錯誤的。對于簡單的問題我找不到答案,對此表示歉意。
查看完整描述

3 回答

?
人到中年有點甜

TA貢獻1895條經驗 獲得超7個贊

您需要使用數組而不是字符串作為文本狀態,因為每個評論都有狀態


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>

));

由于狀態是數組,現在您需要將值設置為text[i],當您更改狀態時,您需要更改元素上的i文本


查看完整回答
反對 回復 2023-08-24
?
紅顏莎娜

TA貢獻1842條經驗 獲得超13個贊

您需要更改狀態以在某處包含文本字符串數組,而不僅僅是單個字符串。然后使用正在迭代的元素的索引來確定要設置什么值以及要在更改時更改什么索引。


我認為最優雅的解決方案是更改comments對象以包含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>

));


查看完整回答
反對 回復 2023-08-24
?
墨色風雨

TA貢獻1853條經驗 獲得超6個贊

試試這個方法


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>

));


查看完整回答
反對 回復 2023-08-24
  • 3 回答
  • 0 關注
  • 217 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號