詳細分析React 表單與事件
本章節我們將討論如何在 React 中使用表單。
HTML 表單元素與 React 中的其他 DOM 元素有所不同,因為表單元素生來就保留一些內部狀態。
在 HTML 當中,像 <input>,<textarea>,和 <select> 這類表單元素會維持自身狀態,並根據使用者輸入進行更新。但在React中,可變的狀態通常儲存在元件的狀態屬性中,並且只能用 setState() 方法進行更新。
一個簡單的例項
在例項中我們設定了輸入框 input 值 value = {this.state.data}。在輸入框值發生變化時我們可以更新 state。我們可以使用 onChange 事件來監聽 input 的變化,並修改 state。
class HelloMessage extends React.Component { constructor(props) { super(props); this.state = {value: 'Hello jb51!'}; this.handleChange = this.handleChange.bind(this); } handleChange(event) { this.setState({value: event.target.value}); } render() { var value = this.state.value; return <div> <input type="text" value={value} onChange={this.handleChange} /> <h4>{value}</h4> </div>; } } ReactDOM.render( <HelloMessage />,document.getElementById('example') );
上面的程式碼將渲染出一個值為 Hello jb51! 的 input 元素,並通過 onChange 事件響應更新使用者輸入的值。
例項 2
在以下例項中我們將為大家演示如何在子元件上使用表單。 onChange 方法將觸發 state 的更新並將更新的值傳遞到子元件的輸入框的 value 上來重新渲染介面。
你需要在父元件通過建立事件控制代碼 (handleChange) ,並作為 prop (updateStateProp) 傳遞到你的子元件上。
class Content extends React.Component { render() { return <div> <input type="text" value={this.props.myDataProp} onChange={this.props.updateStateProp} /> <h4>{this.props.myDataProp}</h4> </div>; } } class HelloMessage extends React.Component { constructor(props) { super(props); this.state = {value: 'Hello jb51!'}; this.handleChange = this.handleChange.bind(this); } handleChange(event) { this.setState({value: event.target.value}); } render() { var value = this.state.value; return <div> <Content myDataProp = {value} updateStateProp = {this.handleChange}></Content> </div>; } } ReactDOM.render( <HelloMessage />,document.getElementById('example') );
執行結果
Select 下拉選單
在 React 中,不使用 selected 屬性,而在根 select 標籤上用 value 屬性來表示選中項。
class FlavorForm extends React.Component { constructor(props) { super(props); this.state = {value: 'coconut'}; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } handleChange(event) { this.setState({value: event.target.value}); } handleSubmit(event) { alert('Your favorite flavor is: ' + this.state.value); event.preventDefault(); } render() { return ( <form onSubmit={this.handleSubmit}> <label> 選擇您最喜歡的網站 <select value={this.state.value} onChange={this.handleChange}> <option value="gg">Google</option> <option value="rn">Runoob</option> <option value="tb">Taobao</option> <option value="fb">Facebook</option> </select> </label> <input type="submit" value="提交" /> </form> ); } } ReactDOM.render( <FlavorForm />,document.getElementById('example') );
執行結果
多個表單
當你有處理多個 input 元素時,你可以通過給每個元素新增一個 name 屬性,來讓處理函式根據 event.target.name
的值來選擇做什麼。
class Reservation extends React.Component { constructor(props) { super(props); this.state = { isGoing: true,numberOfGuests: 2 }; this.handleInputChange = this.handleInputChange.bind(this); } handleInputChange(event) { const target = event.target; const value = target.type === 'checkbox' ? target.checked : target.value; const name = target.name; this.setState({ [name]: value }); } render() { return ( <form> <label> 是否離開: <input name="isGoing" type="checkbox" checked={this.state.isGoing} onChange={this.handleInputChange} /> </label> <br /> <label> 訪客數: <input name="numberOfGuests" type="number" value={this.state.numberOfGuests} onChange={this.handleInputChange} /> </label> </form> ); } }
輸出結果
React 事件
以下例項演示通過 onClick 事件來修改資料:
class HelloMessage extends React.Component { constructor(props) { super(props); this.state = {value: 'Hello jb51!'}; this.handleChange = this.handleChange.bind(this); } handleChange(event) { this.setState({value: '我們'}) } render() { var value = this.state.value; return <div> <button onClick={this.handleChange}>點我</button> <h4>{value}</h4> </div>; } } ReactDOM.render( <HelloMessage />,document.getElementById('example') );
當你需要從子元件中更新父元件的 state 時,你需要在父元件通過建立事件控制代碼 (handleChange) ,並作為 prop (updateStateProp) 傳遞到你的子元件上。例項如下:
class Content extends React.Component { render() { return <div> <button onClick = {this.props.updateStateProp}>點我</button> <h4>{this.props.myDataProp}</h4> </div> } } class HelloMessage extends React.Component { constructor(props) { super(props); this.state = {value: 'Hello jb51!'}; this.handleChange = this.handleChange.bind(this); } handleChange(event) { this.setState({value: '我們'}) } render() { var value = this.state.value; return <div> <Content myDataProp = {value} updateStateProp = {this.handleChange}></Content> </div>; } } ReactDOM.render( <HelloMessage />,document.getElementById('example') );
執行結果
以上就是詳細分析React 表單與事件的詳細內容,更多關於React 表單與事件的資料請關注我們其它相關文章!