'Input'没有定义 react/jsx-no-undef，这是什么意思？

Question

我试图在代码中为name创建一个输入字段，结果得到："输入"没有定义react/jsx没有undef，我看不出有什么问题，有人能帮我吗？

稍后我将把名字输入我的调度

具有文本区域的表单部件正在工作。

import React, { useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import '../styles/NewMessage.css'
import { fetchNewMessage } from 'reducer/messages'
export const NewMessage = () => {
const [message, setMessage] = useState('')
const [name, setName] = useState('')
const dispatch = useDispatch()

const handleMessageSubmit = (event) => {
event.preventDefault()
//console.log('addNewMessage', message)
dispatch(fetchNewMessage(message))
setMessage('')
}
return (
<div className="add-message-container">
{/* ******Form for sending a new message******* */}
<form onSubmit={handleMessageSubmit} className="add-message-form">
<span>
<label>
Name:

这个输入给了我"输入"没有定义react/jsx没有定义

<Input
placeholder="Name"
type="text"
onChange={event => setName(event.target.value)}
value={name}
required
/>
</label>
</span>

此文本区域工作正常

<span>
<label For="new-message">
<textarea
id="new-message"
className="input-message"
rows='3' 
minLength='5'
maxLength='150'
placeholder="Type your message"
onChange={(event) => setMessage(event.target.value)} 
value={message}
required />
</label>
</span>

{/* * Form submit button * */}
<div className="add-message-btn-container">
<button
className="add-message-btn"
type="submit"
title="Send">
Send
</button>
</div>
</form>
</div>
)
}

Answer 1

您需要从某个组件库导入Input组件，或者需要使用input，即HTML元素。JSX标记区分大小写，这就是为什么它会从eslint 向您发出警告

<input
placeholder="Name"
type="text"
onChange={event => setName(event.target.value)}
value={name}
required
/>

Answer 2

是带有小i的<input>标签。

Answer 3

使用<input />而不是<Input />，因为JSX属性区分大小写