如何在 react-bootstrap 的文本区域内获取字符串并在单击按钮时发送到函数？

Question

我有以下反应-bootstrap代码；

<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

Answer 1

使用 useState 钩子定义一个状态来保存字符串值
定义 onChange 处理程序以使用 set-function useState 挂钩
从波函数中的状态读取值

.

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

如何在 react-bootstrap 的文本区域内获取字符串并在单击按钮时发送到函数？

How to get string inside react-bootstrap's textarea and send to function on button-click?

javascript

reactjs

react-bootstrap