“输入”未定义 react/jsx-no-undef，这是什么意思？答案

【问题标题】：'Input' is not defined react/jsx-no-undef, what does that mean?“输入”未定义 react/jsx-no-undef，这是什么意思？
【发布时间】：2020-05-04 07:45:36
【问题描述】：

我试图在我的代码中为名称创建一个输入字段，我得到： 'Input' 没有定义 react/jsx-no-undef 我看不出有什么问题，谁能帮帮我？

我稍后会将名字传递给我的调度

带有 textarea 的表单部分正在工作。

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-no-undef

            <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>
  )
}

【问题讨论】：

标签： reactjs forms input

【解决方案1】：

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

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

【讨论】：

谢谢@ShubhamKhatri ??

【解决方案2】：

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

【讨论】：