React项目中点击按钮alert无法显示FormControl输入内容如何解决？

问题根因 #

当前alert弹出为空的核心原因是FormControl输入框没有和你声明的place状态做双向绑定，输入的内容没有同步更新到state中，所以点击按钮时读取的始终是初始的空字符串。

修改方案 #

只需给FormControl组件添加绑定逻辑即可，修改后的完整代码如下：

import { useState } from 'react';
// 请确保已经正确导入react-bootstrap相关依赖
import { Navbar, Container, Nav, Form, FormControl, Button } from 'react-bootstrap';

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"
          // 新增以下两行双向绑定逻辑
          value={place}
          onChange={(e) => setplace(e.target.value)}
        />
        <Button variant="outline-success" onClick={() => test(place)}>Search</Button>
      </Form>
    </Navbar.Collapse>
  </Container>
</Navbar>
    </div>
  );
}

export default App;

新增的两行逻辑实现了输入内容和state的实时同步：输入时onChange会把最新内容更新到place状态，输入框的显示内容也会跟随place状态变化，点击按钮时就能拿到最新输入值弹出。

内容的提问来源于stack exchange，提问作者Tom