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

Question

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

在 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;

Answer 1

问题在于受控输入与不受控输入。

由于您是从初始(我假设？)ajax/网络查询设置值，所以您的 setNewTitle 似乎没有更新 jsonFromDataBase.title - 或者如果是，您将需要在 onChange 处理程序中再次获取该值。

如果您想使用受控输入(即，使用value 和onChange 进行处理)，那么您应该让您对数据库的初始调用填写 state - 不是直接的值。

如果你想使用非受控输入，你可以通过使用 defaultValue 属性而不是 value 为输入设置一个默认值而不将其更改为受控输入.