top
Loading...
React 表單與事件

React 表單與事件

本章節我們將討論如何在 React 中使用表單。

HTML 表單元素與 React 中的其他 DOM 元素有所不同,因為表單元素生來就保留一些內部狀態。

在 HTML 當中,像 <input>, <textarea>, 和 <select> 這類表單元素會維持自身狀態,併根據用戶輸入進行更新。但在React中,可變的狀態通常保存在組件的狀態屬性中,併且只能用 setState() 方法進行更新。

一個簡單的實例

在實例中我們設置了輸入框 input 值 value = {this.state.data}。在輸入框值發生變化時我們可以更新 state。我們可以使用 onChange 事件來監聽 input 的變化,併修改 state。

React 實例

class HelloMessage extends React.Component { constructor(props) { super(props); this.state = {value: 'Hello Runoob!'}; 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 Runoob! 的 input 元素,併通過 onChange 事件響應更新用戶輸入的值。

實例 2

在以下實例中我們將為大家演示如何在子組件上使用表單。 onChange 方法將觸發 state 的更新併將更新的值傳遞到子組件的輸入框的 value 上來重新渲染界面。

你需要在父組件通過創建事件句柄 (handleChange) ,併作為 prop (updateStateProp) 傳遞到你的子組件上。

React 實例

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 Runoob!'}; 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 屬性來表示選中項。

React 實例

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 的值來選擇做什么。

React 實例

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 事件來修改數據:

React 實例

class HelloMessage extends React.Component { constructor(props) { super(props); this.state = {value: 'Hello Runoob!'}; 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) 傳遞到你的子組件上。實例如下:

React 實例

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 Runoob!'}; 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') );

嘗試一下 »
北斗有巢氏 有巢氏北斗