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组件中定义，而不是在Header组件中定义。实际上，您可以直接调用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;

工作片段：

＆＃13;

    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'))

＆＃13;

<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>

＆＃13;

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'/>

React事件句柄OnChange

2 个答案: