时间戳

首页 > 解决方案 > 属性 value="some value" 使输入不可编辑 React

javascript - 属性 value="some value" 使输入不可编辑 React

问题描述

出于某种原因，我的输入是不可编辑的！我需要它在“编辑帖子”页面上，所以应该有 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 只应用于第二个输入，但目前两者都不可编辑！

标签： javascripthtmlreactjsstyled-components

解决方案

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

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

推荐阅读