React 表單與事件

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

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

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

在執行個體中我們設定了輸入框 input 值 <b>value = {this.state.data}</b>。在輸入框值發生變化時我們可以更新 state。我們可以使用 <b>onChange</b> 事件來監聽 input 的變化，并修改 state。

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 &lt;div&gt;

&lt;input type="text" value={value} onChange={this.handleChange} /&gt;

&lt;h4&gt;{value}&lt;/h4&gt;

&lt;/div&gt;;

ReactDOM.render(

&lt;HelloMessage /&gt;,

document.getElementById('example')

);

上面的代碼将渲染出一個值為 Hello Runoob! 的 input 元素，并通過 onChange 事件響應更新使用者輸入的值。

在以下執行個體中我們将為大家示範如何在子元件上使用表單。

<b>onChange</b> 方法将觸發 state 的更新并将更新的值傳遞到子元件的輸入框的 <b>value</b> 上來重新渲染界面。

你需要在父元件通過建立事件句柄 (<b>handleChange</b>) ，并作為 prop (<b>updateStateProp</b>) 傳遞到你的子元件上。

class Content extends React.Component {

return &lt;div&gt;

&lt;input type="text" value={this.props.myDataProp} onChange={this.props.updateStateProp} /&gt;

&lt;h4&gt;{this.props.myDataProp}&lt;/h4&gt;

&lt;Content myDataProp = {value}

updateStateProp = {this.handleChange}&gt;&lt;/Content&gt;

在 React 中，不使用 selected 屬性，而在根 select 标簽上用 value 屬性來表示選中項。

class FlavorForm extends React.Component {

this.state = {value: 'coconut'};

this.handleSubmit = this.handleSubmit.bind(this);

handleSubmit(event) {

alert('Your favorite flavor is: ' + this.state.value);

event.preventDefault();

return (

&lt;form onSubmit={this.handleSubmit}&gt;

&lt;label&gt;

選擇您最喜歡的網站

&lt;select value={this.state.value} onChange={this.handleChange}&gt;

&lt;option value="gg"&gt;Google&lt;/option&gt;

&lt;option value="rn"&gt;Runoob&lt;/option&gt;

&lt;option value="tb"&gt;Taobao&lt;/option&gt;

&lt;option value="fb"&gt;Facebook&lt;/option&gt;

&lt;/select&gt;

&lt;/label&gt;

&lt;input type="submit" value="送出" /&gt;

&lt;/form&gt;

&lt;FlavorForm /&gt;,

當你有處理多個 input 元素時，你可以通過給每個元素添加一個 name 屬性，來讓處理函數根據 event.target.name 的值來選擇做什麼。

class Reservation extends React.Component {

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

});

&lt;form&gt;

是否離開:

&lt;input

name="isGoing"

type="checkbox"

checked={this.state.isGoing}

onChange={this.handleInputChange} /&gt;

&lt;br /&gt;

訪客數:

name="numberOfGuests"

type="number"

value={this.state.numberOfGuests}

以下執行個體示範通過 onClick 事件來修改資料：

this.setState({value: '菜鳥教程'})

&lt;button onClick={this.handleChange}&gt;點我&lt;/button&gt;

當你需要從子元件中更新父元件的 <b>state</b> 時，你需要在父元件通過建立事件句柄 (<b>handleChange</b>) ，并作為 prop (<b>updateStateProp</b>) 傳遞到你的子元件上。執行個體如下：

&lt;button onClick = {this.props.updateStateProp}&gt;點我&lt;/button&gt;

&lt;/div&gt;