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

【问题标题】：React Input type not able to insert any data反应输入类型无法插入任何数据
【发布时间】：2021-12-15 13:33:46
【问题描述】：

在我的 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

我在上面的代码中做了什么？

【问题讨论】：

这似乎是控制输入的一种过于复杂的方式，而且您的 changeHandle 似乎并没有真正将新值保存在任何地方。
那么，我在哪里可以准确地利用changeHandle 来处理可编辑字段？
一个简单的托管输入通常看起来像这样：<input value={email} onChange={e => setEmail(e.target.value)} /> 我不确定我是否理解您需要使用多个状态和设置函数。 React controlled components documentation

标签： reactjs controlled-component

【解决方案1】：

您将电子邮件作为道具传递，但在您的电子邮件元素中，它只需要“数据”和“更改句柄”。尝试添加电子邮件作为道具：

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

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

【讨论】：

我将emailName 作为道具传递了，但它仍然无法编辑。请查看更新后的问题。
在你的 changeHandle 属性中使用 setEmail 来改变电子邮件的状态。
我正在将 setEmail 管理到另一个组件中。但它仍然无法正常工作。
您的 changeHandle 道具只是 console.log 更改的值。因此，这是行不通的。
哦，我只是用来检查日志的，但 nyws 也更新了那个药水。但仍然没有变化:(