如何在function函数组件中编辑表单数据？

Question

我试图用useState设置一个表单字段值。

settings.values.apiKey变量有一个值，但是textarea元素是空的。我的useState怎么了

我试图将value={apiKey}更改为value={settings.values.apiKey}，然后显示该值，但随后无法更改字段的值。当我尝试输入某物时，它总是显示原始值。

App.js

const App = () => {
    const [apiKey, setApiKey] = useState(settings.values.apiKey)

    useEffect(() => {
        const getSettings = async () => {
            const settingsFromServer = await fetchSettings()
            setSettings(settingsFromServer)
        }

        getSettings()
    }, [])

    const fetchSettings = async () => {
        const res = await fetch('http://127.0.0.1/react-server/get.php')
        return await res.json()
    }

    const saveSettings = async (settings) => {
    }

    return (
        <div className="container">
            <Header />
            <Settings
                settings={settings}
                saveSettings={saveSettings}
            />
            <Footer />
        </div>
    );
}

export default App;

​

Settings.js：

​

import { useState } from 'react';

const Settings = ({ settings, saveSettings }) => {
    const [apiKey, setApiKey] = useState(settings.values.apiKey)

    const onSubmit = (e) => {
        e.preventDefault()

        saveSettings({ apiKey})
    }

    return (
        <div>
            <form className='add-form' onSubmit={onSubmit}>
                <div className='form-control'>
                    <label>Api key</label>
                    <textarea
                        value={apiKey}
                        onChange={(e) => setApiKey(e.target.value)}
                    />
                </div>

                <input type='submit' value='Save settings' className='mt15' />
            </form>
        </div>
    )
}

export default Settings

​

Answer 1

看起来，您在App.js文件中错误地使用了App.js作为状态变量。它应该被设置所取代。

 const [settings, setSettings] = React.useState();

上面的代码将使value={apiKey}对Settings.js文件中的textarea正常工作。然后，onChange也将开始正常工作。

更新

除了上面提到的错误之外，如果settings道具在Settings.js中没有定义，这可能会导致您的代码在useState上中断。因此，请在useEffect中检查设置值，然后设置该值。代码看起来像这样，或者您可以检查这里的代码框链接用于工作演示。

Settings.js

import { useEffect, useState } from "react";

const Settings = ({ settings, saveSettings }) => {
  const [apiKey, setApiKey] = useState();
  useEffect(() => {
    if (settings?.values?.apiKey) {
      setApiKey(settings.values.apiKey);
    }
  }, [settings]);

  const onSubmit = (e) => {
    e.preventDefault();

    saveSettings({ apiKey });
  };

  return (
    <div>
      <form className="add-form" onSubmit={onSubmit}>
        <div className="form-control">
          <label>Api key</label>
          <textarea
            value={apiKey}
            onChange={(e) => setApiKey(e.target.value)}
          />
        </div>

        <input type="submit" value="Save settings" className="mt15" />
      </form>
    </div>
  );
};

export default Settings;

App.js

const [settings, setSettings] = useState()

  const saveSettings = async (settings) => {
      setSettings(settings);
  }