如何在新的Reactjs函式中設定狀態？

我正在嘗試新的無類函式的反應，我試圖使用setstate，但它不作業，如果我直接使用它就說未定義，如果我把this.去掉就說它不是一個函式。

下面是我的代碼

上面的代碼是.... 因為我想選擇一個按鈕，并在點擊操作者選擇，設定狀態和洗掉文本欄位，然后接受另一個輸入，并操作這兩個輸入......

uj5u.com熱心網友回復：

React有它自己的特殊方式來根據元素的狀態（值）更新DOM，所以你不能使用本地元素方法。

在這個例子中，我們使用了三個鉤子。useState, useEffect, 和 useRef.

useState維護輸入元素的狀態，更新的計算，以及被傳遞到結果div中的最終評估。

useEffect確保在結果完成后我們清除calc狀態。

useRef是React識別一個元素的方式。在這種情況下，在每個按鈕被點擊后，輸入元素將再次被關注。

下面是一個例子。

下面是一個基于你的代碼的作業實體。

.container { display: flex; width: 200px; height: 200px; }

.buttons {
  padding: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr。
  grid-gap: 2px;
}

button {
  background: rgba（0, 0, 0, 0.5）。
  border: 1px solid #111;
  padding: 10px;
  color: #EEE;
  border-radius: 5px;
  字體大小: 12px;
  cursor: pointer;
}

<script src="https://cdnjs. cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js">/span></script>
<script src="https://cdnjs.cloudflare. com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>/span>
<div id="react"> </div> 

uj5u.com熱心網友回復：

假設你想跟蹤一個待定狀態

span class="hljs-keyword">import { useState } from "react"。

然后，

const [ isPending , setIsPending ] = useState（false）。

你傳遞給useState(initialValue)函式的值將是狀態的初始值。 你可以向array string或object函式傳遞任何值，如useState()

要設定/改變你宣告的狀態的值

setIsPending(true)。

你的狀態值由isPending變數持有

uj5u.com熱心網友回復：

UPDATED: 關于你的計算器

你所展示的是混合了react和HTML以及Vanilla JS。這不是很好看，而且更難維護。所以，在這個新的代碼沙盒中可以使用 react 的方法：

（它只是將反應的方法用于計算，而不是用于計算。

（它只處理了Sum，作為一個例子的目的，我們可以只用react來做這個應用）

https://codesandbox.io/s/falling-star-hf90r

關于USE STATE

你可以看到一個例子在這里作業。https://codesandbox.io/s/intelligent-cori-5xi34?file=/src/App.js:50-759

最簡單的方法是使用鉤子。現在，有多個鉤子。在你的案例中，你將需要React.useState，它將回傳2個東西：值、設定器。

const [myValue, mySetter] = React.useState（defaultValue）。

在這之后，所有的作業幾乎都是一樣的，在這種情況下，我定義了3個狀態（sum1、sum2和result）和2個額外的函式，handleResult和handleClear，我可以從你的代碼中猜到這些。

export default function App（）{
  const [sum1, setSum1] = React.useState（0）。
  const [sum2, setSum2] = React.useState（0）。
  const [result, setResult] = React.useState（sum1   sum2）。

  const handleCalculate = (/span>) => {
    setResult（ sum1    sum2）。
  }

  const handleClear = (/span>) => {
    setResult（0）。
    setSum1（0）。
    setSum2（0）。
  }

  return (
    <div className="App"/span>>
      <h1>Hello CodeSandbox</h1> 
      <h2>開始編輯以看到一些神奇的事情發生！</h2>
      Sum1: < input type="number" onChange={e => setSum1(e.target.value)}value={e. target.value)} value={sum1}/> <br/>
      Sum2: < input type="number" onChange={e => setSum2(e.target.value)}value={e.target.value}。 target.value)} value={sum2}/> <br/>
      <button onClick={handleCalculate}> Calculate</button>。
      <button onClick={handleClear}> Clear</button> 
      <h2>/span>結果。{result}</h2>結果：h2>
      <h3>Interactive: { sum1    sum2}</h3>/span>
    </div>
  );
}

uj5u.com熱心網友回復：

function App（）{
const [buttonText, setButtonText] = useState("InitialValue") 。
const [sum1, setSum1] = useState（0）。
const [sum2, setSum2] = useState（0）。

  const handleClick=（props）=>{
    setButtonText(props.target.value)
    let inputText = document.getElementById('result').value。
    console.log（inputText   buttonText）。
    
      let total = inputText   buttonText;
        if (total.charAt(0) == "0") {
          
        } else {
          document.getElementById("result").value = total。
        }
        if (props.target.value == "clear") {
          document.getElementById("result").value = " ";
        }
        if (props.target.value ==" "/span>) {
          setSum1(parseFloat(document. getElementById("result").value)）。)
          // alert(sum1);.
          document.getElementById("result").value = " ";
          
        }
        if (props.target.value == "=") {
          
            alert（sum1）。
          setSum2(parseFloat(document. getElementById("result").value)
            
            document.getElementById("result").innerText = sum1 sum2。
          }
        return total;
  }
    return(
///我的代碼 return(
)

請你現在就試試這個。

標籤：

上一篇：在axios帖子請求中得到"跨源請求被阻止"的資訊

下一篇：MongoDB：變數嵌套在幾個物件中