时间戳

首页 > 解决方案 > 将旧信息放入表单后无法向我的表单插入新输入

javascript - 将旧信息放入表单后无法向我的表单插入新输入

问题描述

我有一个完整的表格，其中包含从数据库请求的信息。但是表格不允许我更新表格，我不能在输入上写任何东西。我用错了什么？

在 Graphql 查询之后，标题存储在 jsonFromDataBase 变量中。如果查询是空的，我不想在我的输入中输入任何内容，如果不是，我想要标题，但我也希望能够更改它。问题是标题不允许写任何东西

这是我的代码的样子：

   const Form = () => {
      useEffect(() => {
          KeyUtils.resetGenerator();
      }, []); 

       const [newTitle, setNewTitle] = useState("");  

        return (
            <Title
               type="text"
               value={jsonFromDataBase.title ? jsonFromDataBase.title : newTitle}
               placeholder="Title"
               onChange={e => {
                  setNewTitle(e.target.value);
               }}
               required
            />

       )

  }


  const Title = styled.input`
     margin-bottom: 10px;
     padding: 10px;
     border: 1px solid white;
  `;

  export default Form;

标签： javascriptreactjs

解决方案

问题是受控输入与非受控输入。

由于您是从初始（我假设？）ajax / web 查询中设置值，因此您似乎setNewTitle没有更新jsonFromDataBase.title- 或者如果是，您需要在 onChange 处理程序中再次获取值。

如果您想使用受控输入（即，使用valueand处理onChange），那么您应该让您对数据库的初始调用填写state- 而不是直接填写值。

如果你想使用不受控制的输入，你可以为输入设置一个默认值，而不用使用defaultValueprop 将其更改为受控输入，而不是value.

推荐阅读