为了账号安全,请及时绑定邮箱和手机立即绑定

仅 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条经验 获得超12个赞

您需要更改状态以在某处包含文本字符串数组,而不仅仅是单个字符串。然后使用正在迭代的元素的索引来确定要设置什么值以及要在更改时更改什么索引。


我认为最优雅的解决方案是更改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 关注
  • 114 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信