非受控元件
阿新 • • 發佈:2019-01-01
元件型別 | 表單資料處理方式 |
---|---|
受控元件 | React元件處理 |
非受控 | DOM處理(使用ref) |
受控元件:
class NameForm extends React.Component { constructor(props) { super(props); this.state = {value: ''}; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } handleChange(event) { this.setState({value: event.target.value}); } handleSubmit(event) { alert('A name was submitted: ' + this.state.value); event.preventDefault(); } render() { return ( <form onSubmit={this.handleSubmit}> <label> Name: <input type="text" value={this.state.value} onChange={this.handleChange} /> </label> <input type="submit" value="Submit" /> </form> ); } }
非受控元件(快速隨性,減小程式碼量):
class NameForm extends React.Component { constructor(props) { super(props); this.handleSubmit = this.handleSubmit.bind(this); } handleSubmit(event) { alert('A name was submitted: ' + this.input.value); event.preventDefault(); } render() { return ( <form onSubmit={this.handleSubmit}> <label> Name: <input type="text" ref={(input) => this.input = input} /> </label> <input type="submit" value="Submit" /> </form> ); } }
2.受控vs 非受控
使用場景 | 非受控 | 受控 |
---|---|---|
一次性值的檢查(如表單提交) | y | y |
表單提交時校驗 | y | y |
即時現場驗證 | x | y |
有條件的禁用提交按鈕 | x | y |
強制文字框格式化 | x | y |
一個數據的幾個輸入 | x | y |
動態input | x | y |
備註:如果表單在ui反饋方面很簡單,使用不受控完全ok。
3.受控
每一個表單元素,獨有一個不同的prop設定它的值。下面是表格彙總(含文字框、複選框、單選框、文字域、選擇)
https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/
4.非受控元件,設定預設值時用defaultValue。
<input
defaultValue="Bob"
type="text"
ref={(input) => this.input = input} />
同樣, 和 支援 defaultChecked, 和 支援 defaultValue.
5.檔案輸入
<input type="file" />
是一個不受控元件,因為它的值不是以程式設計方式設定。
備註:建立ref節點以訪問提交處理程式中的檔案:
class FileInput extends React.Component {
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(event) {
event.preventDefault();
alert(
`Selected file - ${this.fileInput.files[0].name}`
);
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Upload file:
<input
type="file"
ref={input => {
this.fileInput = input;
}}
/>
</label>
<br />
<button type="submit">Submit</button>
</form>
);
}
}
ReactDOM.render(
<FileInput />,
document.getElementById('root')
);