在以下實(shí)例中我們將為大家演示如何在子組件上使用表單庵楷。 onChange 方法將觸發(fā) state 的更新并將更新的值傳遞到子組件的輸入框的 value 上來重新渲染界面萝玷。
你需要在父組件通過創(chuàng)建事件句柄 (handleChange) 球碉，并作為 prop (updateStateProp) 傳遞到你的子組件上。
import React, { Component } from 'react';
// 子組件
class Content extends React.Component{
render(){
return <div>
{/* 渲染最新 value 值 觸發(fā)事件時(shí)挎春，獲取父組件傳過來的數(shù)據(jù) */}
<input type="text" value={this.props.myDataProp} onChange={this.props.updateStateProp}/>
{/* 獲取父組件傳入的最新的value值 */}
<h4>{this.props.myDataProp}</h4>
</div>
}
}
// 父組件
class From extends Component {
constructor(props){
super(props);
// 設(shè)置初始值
this.state={value:'你好'}
// 綁定this
this.handleChange = this.handleChange.bind(this)
}
// 監(jiān)聽事件
handleChange(event){
// 獲取最新的value值 并改變?cè)? this.setState({value:event.target.value});
}
render(){
// 將最新的value值 賦值給value
let value = this.state.value;
return(
<div>
{/* 在父組件中渲染子組件 同時(shí)渲染最新的value值 */}
<Content myDataProp = {value} updateStateProp = {this.handleChange} />
</div>
)
}
}
export default From ;
