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来设置输入的默认值，而无需将其更改为受控输入。

将旧信息放入表单后，无法将新输入内容插入表单

1 个答案: