React onClick 傳遞引數
我們將在 react 中引入一個帶有 onClick 方法的引數。我們將分享如何使用按鈕的 onClick 方法傳遞引數的示例。
在使用 React 的 onClick 中使用 Pass 引數
大多數初級開發人員都停留在如何將引數從 onClick 方法傳遞給函式或在使用者單擊表單上的按鈕時從輸入欄位傳遞引數。
我們將在此示例中建立幾個按鈕，並通過單擊它們來傳遞引數。首先，我們將建立一個新應用程式並通過匯入樣式表來設定它的樣式。
# react
npx create-react-app my-app
在 react 中建立我們的新應用程式後，我們將使用此命令轉到我們的應用程式目錄。
# react
cd my-app
現在，讓我們執行我們的應用程式來檢查所有依賴項是否安裝正確。
# react
npm start
在 App.js 中，我們將在下面匯入一個樣式表。
# react
import "./styles.css";
在 React 中使用 e.target.value 儲存引數中的值
作為回報，我們將建立一個帶有兩個按鈕的模板，這些按鈕將使用 onClick 方法呼叫函式 getValue。
我們將兩個按鈕的值設定為 1 和 react。getValue 函式將 e 作為引數，其中包含我們單擊的按鈕的值。
我們可以使用 e.target.value 輕鬆儲存引數中的值。一旦我們從按鈕中獲得值，我們將 console.log() 它。
所以我們在 App.js 中的程式碼將如下所示。
# react
import "./styles.css";
export default function App() {
function getValue(e) {
const value = e.target.value;
console.log(value);
}
return (
<div className="App">
<h1>Pass Parameter OnCick</h1>
<div>
<button className="btns" value="1" onClick={getValue}>
Value 1
</button>
<button className="btns" value="React" onClick={getValue}>
Value 2
</button>
</div>
</div>
);
}
現在，讓我們新增一些 CSS 樣式來使我們的按鈕居中並更改它們的背景顏色。
# react
.App {
font-family: sans-serif;
text-align: center;
}
.btns {
background: black;
color: white;
border: none;
padding: 10px;
margin-left: 10px;
}
.btns:hover {
background: white;
color: black;
border: 1px solid black;
}
輸出：
正如你在上面的示例中看到的，當我們單擊任何按鈕時，它會將所有資料傳送到函式 getValue。
我們將資料分配給函式中使用的引數 e。一旦將資料分配給引數，我們就可以輕鬆地從引數中獲取值並進一步使用它。
Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.
LinkedIn