輸入未更新功能反應組件中的狀態

我環顧四周，看到了類似的問題，但是每當我按照答案進行操作時，我似乎都無法按照我寫的方式讓它作業。我將所有四個狀態作為陣列內部的空白開始，但我想在用戶為每個輸入欄位鍵入時更新狀態。為什么 setChanging 無法更新輸入欄位特定名稱的狀態？當我在每個輸入中鍵入時，控制臺會記錄 x 和 y 值。我必須做一些簡單的錯誤，但我無法弄清楚它是什么。

const ContactForm = () => {

  const initialValues = {
    recipientName: "",
    recipientEmail: "",
    fromName: "",
    fromEmail: "",
  };
  const [changing, setChanging] = useState(initialValues);


  const handleInputChange = (e) => {
    let x = e.target.name;
    let y = e.target.value;
    console.log(x);
    console.log(y);
    setChanging({...changing, [e.target.name]: e.target.value});
    console.log(initialValues);
  }



return (
  <Form>
    <Form.Group className="mb-3">
      <Row>
        <Col>
          <Form.Control
            type="text"
            required
            name="recipientName"
            placeholder="Recipient Name*"
            id="form.recipientName"
            onChange={handleInputChange}
          />
        </Col>
        <Col>
          <Form.Control
            type="email"
            required
            name="recipientEmail"
            placeholder="Recipient Email*"
            id="form.recipientEmail"
            onChange={handleInputChange}
          />
        </Col>
      </Row>
    </Form.Group>
    <Form.Group className="mb-3">
      <Row>
        <Col>
          <Form.Control
            type="text"
            required
            name="fromName"
            placeholder="From Name*"
            aria-invalid="form.fromName"
            onChange={handleInputChange}
          />
        </Col>
        <Col>
          <Form.Control
            type="email"
            required
            name="fromEmail"
            placeholder="From Email*"
            id="form.fromEmail"
            onChange={handleInputChange}
          />
        </Col>
      </Row>
    </Form.Group>
    <Button variant="primary"  type="submit">
      Submit
    </Button>
  </Form>
);

}

export default ContactForm

uj5u.com熱心網友回復：

您正在記錄initialValues：

console.log(initialValues);

所以你總是看到 的值initialValues，它永遠不會改變。你無處觀察狀態。

您可以回應狀??態更新并記錄更新的狀態，useEffect例如：

useEffect(() => console.log(changing), [changing]);

這將記錄該changing值更改的任何時間的值。

如果/當您的 UI 使用狀態來呈現輸出時，您還將觀察 UI 中狀態的更新。（目前沒有。）

uj5u.com熱心網友回復：

我建議你改變一些事情：

<Form.Control
  type="text"
  required
  name="fromName"
  placeholder="From Name*"
  aria-invalid="form.fromName"
  onChange={handleInputChange}
/>

我不確定這些組件是否屬于像 MaterialUI 這樣的框架，但最好有一個名為 value 的屬性，您可以在其中傳遞狀態來處理受控組件而不是不受控組件：

<Form.Control
  type="text"
  required
  name="fromName"
  placeholder="From Name*"
  aria-invalid="form.fromName"
  onChange={handleInputChange}
  value={changing.fromName} // Add this attribute
/>

此外，如果您的 initialState 在函式之外會更好。

  console.log(initialValues);

您應該列印狀態而不是初始值，您要更新的是狀態，而不是初始值。

  setChanging({...changing, [e.target.name]: e.target.value});

uj5u.com熱心網友回復：

這是因為您沒有在輸入中指定value屬性。除此之外，要查看用戶型別的更改，您必須控制臺記錄狀態（此處為更改）而不是初始值。

例子：

<Form.Control
    type="text"
    required
    name="recipientName"
    placeholder="Recipient Name*"
    id="form.recipientName"
    value={changing.fromName}
    onChange={handleInputChange}
/>

標籤：反应反应钩子状态反应功能组件

上一篇：使用ReactRouter自行渲染404頁面，無需任何其他組件

下一篇：將函式輸出回傳到反應js中的組件