我從輸入欄位中獲取數字，并通過單擊按鈕將它們一一呈現在輸入欄位下方。所以我想知道如何從串列中反轉特定單擊專案的文本。
謝謝你。
import { useState } from "react";
import "./styles.css";
const App = () => {
const [text, setText] = useState("");
const [data, setData] = useState([]);
const handleSubmit = (e) => {
e.preventDefault();
setData([...data, text]);
setText("");
};
const reverseNumber = (e, each) => {
return each.split('').reverse().join('')
}
return (
<div>
<form onSubmit={handleSubmit}>
<input
placeholder="magic..."
value={text}
onChange={(e) => setText(e.target.value)}
type="number"
/>
<button disabled={!text} type="submit">
Add
</button>
</form>
<div className="content">
{data.length > 0 &&
data.map((each, index) => {
return <h3 key={index}
onClick={e => reverseNumber(e, each)}
>{each}
</h3>;
})}
</div>
</div>
);
};
export default App;
uj5u.com熱心網友回復：
嘿，你想做這樣的事情很容易。
import { useState } from "react";
import "./styles.css";
const App = () => {
const [text, setText] = useState("");
const [data, setData] = useState([]);
const handleSubmit = (e) => {
e.preventDefault();
setData([...data, text]);
setText("");
};
const reverseNumber = (index, item) => {
item = item.split('').reverse().join('')
let neWData = [...data];
newData[index] = item;
setData(newData)
}
return (
<div>
<form onSubmit={handleSubmit}>
<input
placeholder="magic..."
value={text}
onChange={(e) => setText(e.target.value)}
type="number"
/>
<button disabled={!text} type="submit">
Add
</button>
</form>
<div className="content">
{data.length > 0 &&
data.map((each, index) => {
return <h3 key={index}
onClick={e => reverseNumber(index, each)}
>{each}
</h3>;
})}
</div>
</div>
);
};
export default App;
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/472686.html
標籤：javascript 反应