表單輸入字段值問題

Question

我正在嘗試從用戶輸入電子郵件值並將其存儲在狀態變量中。 我嘗試了以下代碼，但出現錯誤：

<Form.Control type="email" required placeholder="Enter email" value={this.state.email}  onChange={this.setEmail}></Form.Control>

狀態變量定義如下：

this.state = {
    email: '',
}

以下是我設置用戶在電子郵件中輸入的值的代碼：

setEmail = (e) => {
    this.setState(() => ({email: e.target.value}))
}

我嘗試打印 e.target.value。 它是正確的。 但是在運行此代碼時，出現錯誤：

Cannot read property 'value' of null

有關如何解決此問題的任何評論？

Answer 1

發生這種情況是因為該事件未持久化，並且在異步函數中使用（ setState為 async ）。

只需在調用setState之前提取它。

setEmail = (e) => {
    const {value} = e.target;
    this.setState(() => ({email: value}))
}