我试图通过在 app.js 中执行 onchange 事件来更新 header 组件的标题,但似乎无法正确绑定(bind)它们。因此,当用户输入内容时,它将在标题组件中显示文本。
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
形式访问 prop > 而不是 this.props.name
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>
关于javascript - React 事件处理 OnChange,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44070173/