反应输入类型无法插入任何数据

Question

在我的 React 组件中，我使用了输入类型；但不知何故，它无论如何都无法编辑。

我也检查了 this post 但无法找到解决方案。

const Index = ({
  const [editable, setEditable] = useState(false)
  const [email, setEmail] = useState('')

  useEffect(() => {
    if (data) {
      setEmail(data.primaryEmail)
    }
  }, [data])

  return (
    <Emails 
      data={data} 
      changeHandle={e => setEmail(e.target.value)}
      emailName={email}
    />
  )
})

export default connect(mapStateToProps)(Index)


const Emails = ({
    data,
    changeHandle,
    emailName
  }) => {

return (
  <Card>
    <React.Fragment>
      <tr key={email}>
        <td className="text-gray-6 pl-0 pb-0">
          <input className="mb-2" value={emailName} onChange={e => changeHandle(e)} />
        </td>
      </tr>
    </React.Fragment>
  </Card>
)
}

export default Emails

上面这段代码我在做什么？

Answer 1

您将电子邮件作为道具传递，但在您的电子邮件元素中，它只需要 'data' 和 'channgeHandle'。尝试添加电子邮件作为道具：

const Emails = ({ data, email, changeHandle }) => {
  return (
    <Card>
        <tr key={email}>
          <td className="text-gray-6 pl-0 pb-0">
            <input className="mb-2" value={email} onChange={e => changeHandle(e)} />
          </td>
        </tr>
    </Card>
  )
}

之后，将 setEmail 传递给 changeHandle 属性：

return (
    <Emails 
      data={data} 
      changeHandle={e => setEmail(e.target.value)}
      emailName={email}
    />
  )

除此之外，显然您的数据道具在任何时候都没有使用，所以我看不到它的实用性。

反应输入类型无法插入任何数据

React Input type not able to insert any data

reactjs

controlled-component