React事件句柄OnChange

Question

我想通過在我的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; 

Answer 1

changeTitle函數應在App部件來限定，而不是在標題組件。事實上，你可以直接調用changeTitle組件，而不是從handleChange並在頁眉組件訪問的道具爲this.props.title調用它，而不是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>

Answer 2

您不需要將更改事件傳遞給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'/>