Javascript React.js Bootsrap在执行'；简单'；任务

所以第一次使用React引导，我不知道这里出了什么问题。 我试图在焦点上更改输入的占位符，代码如下：

let ColorInput=document.getElementById（'AddRoomColorInput'）；
console.log（颜色输入）
ColorInput.addEventListener（'focus'，（）=>{
})

以下是引导如何与React一起工作的简单方法。基本上，它更多的是反应本身，而不是引导

您需要将处理程序添加到

Form.Control

。例如，我添加了

onChange

，

onFocus

，

onBlur

。这是一个简单的函数，您可以根据需要更改任何内容。在这种情况下，如果需要更改占位符文本，可以将组件状态与

useState

一起使用

import React, { useState } from "react";
import { Form, Button, Input } from "react-bootstrap";

export default function Addroom() {
  const [state, setState] = useState("Room color");

  const handleChange = () => {
    console.log("handleChange");
  };

  const handleFocus = () => {
    console.log("handleFocus");
    setState("Room size");
  };

  const handleBlur = () => {
    console.log("handleBlur");
    setState("Room color");
  };

  return (
    <React.Fragment>
      <div id="addRoomContainer">
        <h2 id="addRoomH2">Room properties:</h2>
        <Form.Control
          id="selectInputAddRoom"
          placeholder="Room type"
          as="select"
        >
          <option>Room type</option>
          <option>Bedroom</option>
          <option>Bathroom</option>
          <option>Kitchen</option>
        </Form.Control>
        <Form.Control
          id="addRoomRoomNameInput"
          maxlength="10"
          type="text"
          placeholder="Room name"
        />
        <Form.Text id="mutedTextRoomNameInput" className="text-muted">
          Maximum 10 charcters.
        </Form.Text>
        <Form.Control
          id="addRoomRoomColorInput"
          type="text"
          placeholder={state}
          onChange={handleChange}
          onFocus={handleFocus}
          onBlur={handleBlur}
        />
        <Form.Text id="mutedTextRoomColorInput" className="text-muted">
          Red/Blue/Green/black.
        </Form.Text>
        <Button id="addRoomProceedButton" variant="success">
          Proceed
        </Button>
      </div>
    </React.Fragment>
  );
}

import React，{useState}来自“React”；
从“react bootstrap”导入{Form，Button，Input}；
导出默认函数Addroom（）{
常量[状态，设置状态]=使用状态（“房间颜色”）；
常量handleChange=（）=>{
控制台日志（“handleChange”）；
};
常量handleFocus=（）=>{
控制台日志（“handleFocus”）；
设置状态（“房间大小”）；
};
常量车把长度=（）=>{
控制台日志（“把手”）；
设置状态（“房间颜色”）；
};
返回(
房间属性：
房间类型
卧室
浴室
厨房
最多10个字符。
红/蓝/绿/黑。
继续
);
}

我明白了。谢谢，工作很完美。如果答案正确，请接受（勾选）