我有那個代碼：
const App = () => {
const [place, setplace] = useState("")
const test = (place) => {
alert(place)
}
return (
<div className="App">
<Navbar bg="light" expand="lg">
<Container fluid>
<Navbar.Toggle aria-controls="navbarScroll" />
<Navbar.Collapse id="navbarScroll">
<Nav
className="me-auto my-2 my-lg-0"
style={{ maxHeight: '100px' }}
navbarScroll
>
</Nav>
<Form className="d-flex">
<FormControl
type="search"
placeholder="Lieu"
className="me-2"
aria-label="Search"
/>
<Button variant="outline-success" onClick={() => test(place)}>Search</Button>
</Form>
</Navbar.Collapse>
</Container>
</Navbar>
</div>
);
}
export default App;
我的問題是當我點擊按鈕時，我在警告框中什么都沒有，而我想在警告框中看到我在 FormControl 中輸入的內容。
我怎樣才能做到這一點 ？
非常感謝 ！
uj5u.com熱心網友回復：
您需要添加onChange到表單控制元件，然后呼叫您的函式，此外，由于您正在使用狀態，因此無需將其作為引數傳遞。
演示
例子：
export default function App() {
const [state, setState] = useState("Hi");
const showAlert = useCallback(() => {
alert(state);
}, [state]);
return (
<div className="App">
<input
type="text"
onChange={(e) => {
console.log(e.target.value);
setState(e.target.value);
}}
/>
<button onClick={showAlert}>Show Alert</button>
</div>
);
}
uj5u.com熱心網友回復：
現在你沒有任何東西改變'place'的值，所以你總是會有一個空值傳遞給test()。
您需要做的是向您的 FormControl 添加一個 onChange 事件，該事件使用輸入的值更新您的狀態。
const App = () => {
const [place, setplace] = useState("")
const test = (place) => {
alert(place)
}
// new
handleChange = (event) => {
setplace(event.target.value);
}
return (
<div className="App">
<Navbar bg="light" expand="lg">
<Container fluid>
<Navbar.Toggle aria-controls="navbarScroll" />
<Navbar.Collapse id="navbarScroll">
<Nav
className="me-auto my-2 my-lg-0"
style={{ maxHeight: '100px' }}
navbarScroll
>
</Nav>
<Form className="d-flex">
<FormControl
type="search"
placeholder="Lieu"
className="me-2"
aria-label="Search"
onChange=this.handleChange // new
/>
<Button variant="outline-success" onClick={() => test(place)}>Search</Button>
</Form>
</Navbar.Collapse>
</Container>
</Navbar>
</div>
);
}
我有一段時間沒有真正使用 React，所以我的語法可能有點偏離，但這至少應該是一個很好的起點。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/330752.html
標籤：反应
上一篇：節點電子商務購物車NaN問題