這是我在登錄組件中使用的函式，因此當我更改電子郵件時，它會更改它的值
handleChange =e=>{
//clone
let username = {...this.state.username};
//edit
username = e.currrentTarget.value;
//change state
this.setState({username});
}
我在以下幾行中呼叫此函式
<form onSubmit ={this.handleSubmit}>
<div className="mb-3">
<label htmlFor="exampleInputEmail1" class="form-label">Email address</label>
<input
value= {this.state.username}
onChange = {this.handleChange}
type="email"
className="form-control"
id="exampleInputEmail1"
aria-describedby="emailHelp"/>
<div id="emailHelp" className="form-text">We'll never share your email with anyone else.</div>
</div>
所以我得到這個錯誤
Warning: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.
at input
at div
at form
at Login (http://localhost:3000/static/js/main.chunk.js:831:5)
at Routes (http://localhost:3000/static/js/vendors~main.chunk.js:33026:5)
at main
at App (http://localhost:3000/static/js/main.chunk.js:238:5)
at Router (http://localhost:3000/static/js/vendors~main.chunk.js:32959:15)
at BrowserRouter (http://localhost:3000/static/js/vendors~main.chunk.js:32474:5)
uj5u.com熱心網友回復：
好的，所以這不是錯誤。在這種情況下，您需要使用連接的組件。
<input
value={this.state.username}
onChange={this.handleChange}
type="email"
className="form-control"
id="exampleInputEmail1"
aria-describedby="emailHelp"
/>
出于某種原因，this.handleChange似乎null或undefined.
向我們展示用于除錯的完整代碼。或者，嘗試使用：
<input
value={this.state.username}
onChange={handleChange}
type="email"
className="form-control"
id="exampleInputEmail1"
aria-describedby="emailHelp"
/>
另外，請記住，可能會有一些快取的錯誤訊息，因此請重繪 一次。
這不是錯誤，只是警告。
您可以使用e.target.value或您現在正在使用的任何東西。
handleChange = e => {
// also you're not using it right.
// because username is just a string value not an object.
// let username = { ...this.state.username };
// it should be:
let username = this.state.username;
//edit
username = e.currrentTarget.value;
//change state
this.setState({ username });
};
請查看上面的代碼塊以獲取有關您出錯的地方的評論。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/375410.html
標籤：javascript 反应