[英]React Event Handle OnChange
我正在嘗試通過在app.js中執行onchange事件來更新標題組件的標題,但似乎無法正確綁定它們。 因此,當用戶輸入內容時,它將在標題組件中顯示文本。
APP.JS
import React, { Component } from 'react';
import './App.css';
import Header from './Header';
class App extends Component {
constructor(props) {
super(props);
this.state = {name: "Michael"}
}
handleChange(e) {
const name = e.target.value;
this.changeTitle(name);
}
render() {
return (
<div className="App">
<Header changeTitle={this.changeTitle.bind(this)} title={this.state.name}/>
<p className="App-intro">
Type here to change name.
<input type="text" onChange={this.handleChange.bind(this)}/>
</p>
</div>
);
}
}
export default App;
HEADER.JS
import React, { Component } from 'react';
import logo from './logo.svg';
class Header extends Component {
changeTitle(name) {
this.setState({name});
}
render() {
return (
<div>
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React {this.props.name}</h2>
</div>
</div>
);
}
}
export default Header;
changeTitle函數應在App組件中定義,而不應在Header組件中定義。 實際上,您可以直接調用changeTitle
組件,而不是從handleChange
調用它,並且在Header組件中,以this.props.title
而不是this.props.name
身份訪問prop。
import React, { Component } from 'react';
import './App.css';
import Header from './Header';
class App extends Component {
constructor(props) {
super(props);
this.state = {name: "Michael"}
}
changeTitle = (e) =>{
this.setState({name: e.target.value});
}
render() {
return (
<div className="App">
<Header title={this.state.name}/>
<p className="App-intro">
Type here to change name.
<input type="text" onChange={this.changeTitle}/>
</p>
</div>
);
}
}
export default App;
並將其用作標題
import React, { Component } from 'react';
import logo from './logo.svg';
class Header extends Component {
render() {
return (
<div>
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React {this.props.title}</h2>
</div>
</div>
);
}
}
export default Header;
工作片段:
class App extends React.Component { constructor(props) { super(props); this.state = {name: "Michael"} } changeTitle = (e) =>{ this.setState({name: e.target.value}); } render() { return ( <div className="App"> <Header title={this.state.name}/> <p className="App-intro"> Type here to change name. <input type="text" onChange={this.changeTitle}/> </p> </div> ); } } class Header extends React.Component { render() { var logo = 'https://processing.org/tutorials/pixels/imgs/tint1.jpg'; return ( <div> <div className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <h2>Welcome to React {this.props.title}</h2> </div> </div> ); } } ReactDOM.render(<App/>, document.getElementById('app'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="app"></div>
您無需將change事件傳遞給Header組件,只需傳遞數據並在App組件中執行setState
。
原因是您僅使用Header組件顯示標題名稱,因此狀態應由父組件App管理。
檢查工作片段:
class App extends React.Component { constructor(props) { super(props); this.state = {name: "Michael"} } handleChange(e) { const name = e.target.value; this.setState({name}); //do the setState here } render() { return ( <div className="App"> <Header title={this.state.name}/> <p className="App-intro"> Type here to change name. <input type="text" onChange={this.handleChange.bind(this)}/> </p> </div> ); } } class Header extends React.Component { render() { return ( <div> <div className="App-header"> <img src={''} className="App-logo" alt="logo" /> <h2>Welcome to React {this.props.title}</h2> </div> </div> ); } } ReactDOM.render(<App/>, document.getElementById('app'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id='app'/>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.