我有以下反應引導代碼；
<Form>
<Form.Group className="mb-3" controlId="exampleForm.ControlTextarea1">
<Form.Label>Example textarea</Form.Label>
<Form.Control as="textarea" rows={3} />
</Form.Group>
</Form>
<Button
variant="outline-primary"
size="lg"
active
onClick={() => wave(TextAreaString)}
>
Wave at Me
</Button>
網頁看起來像這樣；
單擊按鈕時，我希望該功能wave(textarea_string)運行。textarea_string是文本區域內的字串。
我正在使用 React-bootstrap v2.4 和 React v18
uj5u.com熱心網友回復：
- 使用 useState 鉤子定義一個狀態來保存字串值
- 使用 useState 鉤子的 set-function 定義 onChange 處理程式以保存更改的字串值
- 從波函式中的狀態讀取值
.
export default function App() {
const wave = (text) => console.log(text);
const [value, setValue] = useState("");
const onChange = (event) => setValue(event.target.value);
return (
<div className="m-3">
<Form>
<Form.Group className="mb-3" controlId="exampleForm.ControlTextarea1">
<Form.Label>Example textarea</Form.Label>
<Form.Control
as="textarea"
rows={3}
value={value}
onChange={onChange}
/>
</Form.Group>
</Form>
<Button
variant="outline-primary"
size="lg"
active
onClick={() => wave(value)}
>
Wave at Me
</Button>
</div>
);
}
https://codesandbox.io/s/determined-bassi-h85x27
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/483365.html
標籤：javascript 反应 反应引导