属性 value="some value" 使输入不可编辑 React答案

【问题标题】：Attribute value="some value" makes input uneditable React属性 value="some value" 使输入不可编辑 React
【发布时间】：2021-08-30 02:06:07
【问题描述】：

由于某种原因，我的输入无法编辑！我需要它在“编辑帖子”页面上，所以应该有 value =“some prev value”，这样用户可以更方便地从以前的值编辑他/她自己的帖子。占位符属性不符合我的要求，因为它只是向用户显示以前的数据，并且不允许他对其进行更正，因此用户只能写下他想要再次编辑的所有内容和又来了！

const ArticleTitle = window.styled.input`
  &:focus {
    outline: none;
  }
  border: none;
  width: ${adaptSize(599)};
  color: #8e8e8e;
  height: ${adaptSize(26)};
  font-size: ${adaptSize(20)}!important;
  background-color: #eeeeee;
  border-radius: ${adaptSize(9)};
  margin-bottom: ${adaptSize(14)}!important;
`;

const ArticleContent = window.styled.input`
  font-size: ${adaptSize(18)};
  padding-top: ${adaptSize(14)}!important;
  border-top: ${adaptSize(1)} solid #5e5e5e !important;
  width: ${adaptSize(1000)};
  color: #8e8e8e;
  display: flex;
  border: none;
  &:focus {
    outline: none;
  }
`;
function EditPost({article}){
         return ( <>
         <Article>
            <ArticleTitle type="text" value={article.title} id="title" />
            <ArticleContent type="text" value={article.content} id="content" />
         </Article>
         </> )
}

const article = {
  title: "some title",
  content: "some content"
};

//我要编辑的文章示例

我已经编辑了我的原始代码，使其更具可读性。结果只是输入了不可编辑的字段！我希望它的默认值仍然存在，但这样用户可以进行一些更正！我不知道为什么这两个输入的默认行为被一些奇怪的行为所覆盖。我以为原因是 display flex，但 display flex 只应用于第二个输入，但目前两者都无法编辑！

【问题讨论】：

标签： javascript html reactjs styled-components

【解决方案1】：

在 React 中有两种输入字段的方法 - controlled（在大多数情况下推荐）和 uncontrolled。当您传入这样的值时，您是在尝试使用受控输入。现在您必须负责处理输入的更改事件，因为它是由您控制的。但是由于没有onchange函数，所以就不行了。

简而言之，添加一个 onChange 事件处理程序。

【讨论】：

【解决方案2】：

你必须处理输入的 onChange 状态，如果你想传递一个 value prop给它，如果你不想这样做，你可以像这样用 defaultValue 替换 value：

<ArticleTitle type="text" defaultValue={article.title} id="title" />

【讨论】：