在反应输入字段中输入字符后输入失去焦点，我认为它的目标问题

Question

如果我在反应输入字段中输入任何内容，那么它只允许我输入一个字符，然后焦点会移到输入字段之外，然后再次单击输入字段，只允许我输入一个字符

这是我的代码：-

我尝试使用 ref 但对我不起作用，我希望在输入字段中写入而不会失去焦点

这是我的代码

import React, { useEffect, useState } from "react";
import { Box, Typography, Paper, Grid, IconButton } from "@mui/material";




export default function EmployeerMessage() {
  const [user, setUser] = useState(null);
  const [messages, setMessages] = useState([]);
  const [textMessage, setTextMessage] = useState('');
  const [file, setFile] = useState(null);
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState(null);
  const [rooms, setRooms] = useState([]);
  const [selectedRoomId, setSelectedRoomId] = useState('');

  return (
    <section className="messageEmployee">
      <Box>
        <Grid className='flexColumnRespo' container spacing={2} sx={{ py: 5 }}>
          <Grid item xs={12} xl={8} lg={7} md={7}>
            <Item>
              <Box>
                <Box
                  sx={{
                    display: "flex",
                    alignItems: "center",
                    py: 2,
                    px: 1,
                    borderTop: 1,
                    borderColor: "#E9E9E9",
                  }}
                  className=""
                >

                  <div className="chat-searchbox-wrap">
                    {/* The below is the input that I want to change it */}
                    <input
                      type="text"
                      className="messageText"
                      value={textMessage}
                      onChange={(e) => setTextMessage(e.target.value)}
                    />
                    <button
                      style={{ cursor: "pointer" }}
                      onClick={sendMessage}
                      className="zzzz">
                      <span>
                        Send
                      </span>
                    </button>
                  </div>
                </Box>
              </Box>
            </Item>
          </Grid>
        </Grid>
      </Box>
    </section>
  );
}

我无法在 React 的 input type="text" 元素中输入多个字符。

在第一个字符之后，反应应用程序正在重新渲染，阻止我输入另一个字符。请让我知道我在这里缺少什么。

Answer 1

很可能是你的按钮 onclick 导致重新渲染，你可能需要这样写

onClick={() => sendMessage()}

否则，为了避免重新渲染，请使用 ref 代替，如下所示：

<input
  ref={inputRef}
  type="text"
  className="messageText"
/>

要访问参考，请使用

console.log(inputRef.current)

确保从 React 导入 useRef。