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

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

React 狀態(tài)改變時(shí)輸入不變

React 狀態(tài)改變時(shí)輸入不變

我有一個(gè)帶有 3 個(gè)選項(xiàng)和 3 個(gè)文本輸入的選擇輸入。ideia 是:我選擇所需的屬性(例如:A),并且只有此輸入對用戶可用,其他的將被禁用。然后我單擊禁用輸入下方的“計(jì)算”按鈕,根據(jù)我插入的屬性顯示該輸入的計(jì)算值(在本例中,只是為了簡化,此值始終為 123)。import React, { useState } from "react";import "./styles.css";export default function App() {  const [models, setModels] = useState([    { name: "A", value: undefined },    { name: "B", value: undefined },    { name: "C", value: undefined }  ]);  const onModelChange = (e) => {    const { name, value } = e.target;    let newModels = models;    newModels[      newModels.findIndex((model) => model.name === name)    ].value = parseInt(value, 10);    setModels(newModels);  };  const onCalculate = (modelName) => {    let newModels = models;    newModels[      newModels.findIndex((model) => model.name === modelName)    ].value = 123;    console.log(newModels);    setModels(newModels);  };  const [selectedOption, setSelectedOption] = useState("A");  const handleChange = (e) => {    setSelectedOption(e.target.value);  };  return (    <div className="App">      <select onChange={handleChange} value={selectedOption}>        <option value="A">A</option>        <option value="B">B</option>        <option value="C">C</option>      </select>      <br />      {models.map((model) => (        <div key={model.name}>          <input            placeholder={model.name}            name={model.name}            label={model.name}            width="100px"            type="number"            min="0"            max="1000"            value={model.value}            onChange={onModelChange}            disabled={selectedOption !== model.name}          />我的問題是輸入中的值來自一個(gè)名為“模型”的狀態(tài)變量,在我單擊“計(jì)算”后,這個(gè)變量發(fā)生了變化,正如您在控制臺上看到的那樣,但該值未顯示在禁用的輸入中.有誰知道如何解決這一問題?codesandbox 鏈接:https://codesandbox.io/s/affectionate-ives-uytgy ?file=/src/App.js
查看完整描述

1 回答

?
守著一只汪

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

問題

您正在改變狀態(tài)數(shù)組并更新它。React 不知道狀態(tài)是否已經(jīng)改變,因?yàn)槟銈鬟f的是對 setState 的舊引用。

解決方案

  1. 首先,獲取狀態(tài)數(shù)組的副本。

  2. 改變狀態(tài)數(shù)組的復(fù)制版本。

  3. 使用新的更新變異數(shù)組更新您的狀態(tài)。

 const onModelChange = e => {

    const { name, value } = e.target;

    let newModels = [...models];

    newModels[

      newModels.findIndex(model => model.name === name)

    ].value = parseInt(value, 10);

    setModels(newModels);

  };


  const onCalculate = modelName => {

    let newModels = [...models];

    newModels[

      newModels.findIndex(model => model.name === modelName)

    ].value = 123;

    setModels(newModels);

  };

您可以在此示例中檢查類似的問題:- https://stackblitz.com/edit/react-osxmnr


查看完整回答
反對 回復(fù) 2023-03-18
  • 1 回答
  • 0 關(guān)注
  • 143 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號

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