資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會科學
時尚研究
法律研究React.js 中的非受控元件
在受控元件形式的資料中，資料由 React 元件處理，方法是對狀態更新寫入事件處理程式。但在非受控元件中，表單資料由 DOM 本身處理。
ref 用於從 DOM 中接收表單值。
示例
class UserNameForm extends React.Component {
constructor(props) {
super(props);
this.handleFormSubmit = this.handleFormSubmit.bind(this);
this.inputUserName = React.createRef();
}
handleFormSubmit(event) {
console.log('username: ' + this.inputUserName.current.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleFormSubmit}>
<label>
Name:
<input type="text" ref={this.inputUserName} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}Reacts createRef 函式為表單欄位建立一個引用，在表單提交時，我們可以透過 suing this.inputUserName.current .value 訪問欄位值。請注意在 ref 名稱後使用current 。
它實際上是一個快速且有點糙的解決方案，程式碼較少，但控制較少。
使用非受控元件，React 提供了名為 defaultValue 的屬性，以向表單欄位提供初始值。
render() {
return (
<form onSubmit={this.handleFormSubmit}>
<label>
User Name:
<input
defaultValue="Steve"
type="text"
ref={this.inputUserName} />
</label>
<input type="submit" value="Submit" />
</form>
);
}檔案輸入型別始終是非受控元件，因為其值只能由使用者設定，不能透過程式設計方式設定。
示例
檔案輸入的示例 −
class FileInputExample extends React.Component {
constructor(props) {
super(props);
this.handleFormSubmit = this.handleFormSubmit.bind(this);
this.selectedFileInput = React.createRef();
}
handleFormSubmit(event) {
event.preventDefault();
console.log(
`Selected file - ${
this.selectedFileInput.current.files[0].name
}`
);
}
render() {
return (
<form onSubmit={this.handleFormSubmit}>
<label>
Upload file:
<input type="file" ref={this.selectedFileInput } />
</label>
<br />
<button type="submit">Submit</button>
</form>
);
}
}
ReactDOM.render(
<FileInputExample />,
document.getElementById('root')
);
更新時間： 2019 年 8 月 28 日
378 次瀏覽
廣告