我正在將 React 與 Material UI 的 Textfield 組件一起使用。試圖找出以最少的冗余設定表單狀態的最佳方法。例如，我有 8 個不同的輸入欄位。而不是為每個輸入設定單獨的處理程式，例如 handleFirstName、handleLastName、handleEmail、handleInfo 等。
因此，為了實作這一點，我嘗試創建一個 handleChange 處理程式，如下所示：
handleChange = (e) => {
this.setState({
[e.target.name]: e.target.value
});
}
在每個組件上，
<TextField
className={classes.formInput}
name="firstName"
onChange={e => this.handleChange(e.target.value)}
required
id=""
type="text"
InputLabelProps={{
shrink: true,
}}
error={!firstName}
helperText="Name is required"
label="First Name"
variant="standard" />
<TextField
className={classes.formInput}
name="lastName"
onChange={e => this.handleChange(e.target.value)}
required
id=""
type="text"
InputLabelProps={{
shrink: true,
}}
label="Last Name"
variant="standard" />
這是我的狀態物件
constructor(props) {
super(props);
this.state = {
firstName: '',
lastName: '',
...,
};
}
這些只是兩個輸入欄位，但還有大約 6 個看起來相同的欄位。有什么想法可以對抗這個未定義的名稱嗎？
uj5u.com熱心網友回復：
問題是您沒有傳遞完整的事件物件。您只傳遞值。這就是您將名稱設為未定義的原因。
嘗試將 onChange 事件更改為以下 -
onChange={this.handleChange}
通過這種方式，您將在函式的e變數中獲得完整的事件物件。
uj5u.com熱心網友回復：
我認為您需要在單個函式中處理多個輸入欄位更改。這是可行的。嘗試這個
handleChange = (e)=>{
{name,value} = e.target;
this.setState({
[name]=value;
});
}
最后何時將 onChange 方法傳遞給欄位使用：
onChange = {this.handleChange}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/343819.html
標籤：javascript 反应
上一篇：組合2個不同長度的陣列并排序日期