リアクションイベントハンドル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

Answer 1

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成分としないで定義されるべきです。実際には、あなたは直接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; 

としてあなたのヘッダーでそれを使用するようhandleChangeとヘッダ・コンポーネントへのアクセスで小道具からそれを呼び出す代わりにchangeTitleコンポーネントを呼び出すことができますワーキングスニペット：

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

変更イベントをヘッダコンポーネントに渡す必要はありません。データのみを渡して、アプリケーションコンポーネントのsetStateを実行してください。

理由ヘッダーコンポーネントを使用してヘッダー名を表示しているため、状態は親コンポーネント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'/>