這篇文章主要介紹如何在 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} />
<h5>{value}</h5>
</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} />
<h5>{this.props.myDataProp}</h5>
</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>
<h5>{value}</h5>
</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>
<h5>{this.props.myDataProp}</h5>
</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中使用表單的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
