import ReactDOM from 'react-dom';
import React, {useState} from 'react';
function App() {
const [arr, setArr] = useState(["bmw", "mercedes", "audi"]);
let result;
let i = 0;
function Add() {
????
}
return(
<div>
<button onClick={Add}>Add item</button>
<div>{arr.map(x => <p>{x}</p>)}</div>
</div>
)
}
ReactDOM.render(<App />, document.getElementById("root"));
上面的代碼只是一次列印所有陣列元素。單擊按鈕后如何使它們一一出現（單擊一次 - 顯示 arr[0]，第二次單擊 - 顯示 arr[1] 等？
uj5u.com熱心網友回復：
添加新狀態以更新索引，并讓按鈕呼叫該函式。然后呼叫另一個函式，在該陣列上將陣列元素分割到索引，map并回傳一些 JSX。
const { useState } = React;
function Example() {
const [arr, setArr] = useState(['bmw', 'mercedes', 'audi']);
// Add a new state for the index
const [index, setIndex] = useState(0);
// Click the button - update the index
function addElement(arr) {
setIndex(index 1);
}
// Return some JSX by slicing the array up
// to the index, and then `map` over that array
// and return some divs
function getElements(arr, index) {
return arr.slice(0, index).map(el => {
return <div>{el}</div>;
});
}
return (
<div>
<button onClick={addElement}>Add item</button>
{getElements(arr, index)}
</div>
);
}
ReactDOM.render(
<Example />,
document.getElementById('react')
);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>uj5u.com熱心網友回復：
您可以使用表示的狀態index和slice方法：
const [index, setIndex] = useState(0);
return (
<button onClick={() => setIndex(prevIndex => prevIndex 1)}>Click Me</button>
{array.slice(0, index).map(x => <p>{x} </p>)}
);
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/465343.html
標籤：javascript 数组 反应 点击