來自父級的道具更改后，不會重新呈現React子組件

Question

我正在學習React並遇到了這種情況。 基本上我有一個帶有輸入框的React組件測試，在里面我有另一個組件Hello打印出Hello +所有文本用戶類型。 所以我期望的是，如果我輸入某個，那么this.text將被更新，然后Hello組件將重新渲染。 然而，這並沒有發生。 我意識到我需要在this.state中設置“text”然后Hello將重新渲染。 我的問題是為什么Hello組件不會重新渲染，雖然它的道具已被更改？ 提前致謝。

import ReactDOM from "react-dom";
import React, { Component } from "react";

import Hello from "./hello";

class Test extends Component {
  constructor(props) {
    super(props);          
    this.handleChange = this.handleChange.bind(this);  
  }    


  handleChange(e) {     
    this.text = e.target.value;    
    console.log(this.text);   
  }

  render() {
    return (
      <div>
        <h1>Test</h1>
        <form>
          <input value={this.text} onChange={e => this.handleChange(e)} />
          <button>Add</button>          
        </form>
        <Hello name={this.text} />
      </div>
    );
  }
}

和Hello.js組件是

export default ({ name }) => <h1>Hello {name}!</h1>;

Answer 1

您的代碼有2個問題。 首先，您需要在構造函數中擁有state 。 其次，您需要使用React提供的setState設置狀態。

import ReactDOM from "react-dom";
import React, { Component } from "react";

import Hello from "./hello";

class Test extends Component {
  constructor(props) {
    super(props); 
    // This is how you set state
    this.state = {  
      text:''
    }         
    this.handleChange = this.handleChange.bind(this);  
  }    


  handleChange(e) {
    // This is how you update state
    this.setState({text: e.target.value})     
    console.log(this.text);   
  }

  render() {
    return (
      <div>
        <h1>Test</h1>
        <form>
          <input value={this.state.text} onChange={e => this.handleChange(e)} />
          <button>Add</button>          
        </form>
        <Hello name={this.state.text} />
      </div>
    );
  }
}

這是一個文檔，您可以在其中閱讀更多相關信息。

Answer 2

在這里，您要修改實例字段（ this.text ），而不是使用setState()設置狀態。

例如你的代碼，簡化：

import React, { Component } from "react";

class App extends Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.state = { text: "" };
  }

  handleChange(e) {
    this.setState({text:e.target.value});
  }

  render() {
    return (
      <div>
        <h1>Test</h1>
        <form>
          <input value={this.state.text} onChange={e => this.handleChange(e)} />
          <button>Add</button>
        </form>
        {this.state.text}
      </div>
    );
  }
}
export default App;

Answer 3

您需要使用setState而不是將值設置為本地var。 渲染自動跟隨setState。

 class App extends React.Component { constructor(props) { super(props); // Add state to the constructor this.state = { text: '' }; this.handleChange = this.handleChange.bind(this); } handleChange(e) { // Set the value to the state text property this.setState({ text: e.target.value }); } // Use `this.state.text` instead of this.text render() { return ( <div> <h1>Test</h1> <form> <input value={this.state.text} onChange={this.handleChange} /> <button>Add</button> </form> <Hello name={this.state.text} /> </div> ); } } function Hello({ name }) { return <h1>Hello {name}!</h1>; } ReactDOM.render( <App />, document.getElementById('root') ); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"></div> 

Answer 4

這可以通過在組件上設置狀態來處理。 您需要在測試組件中修復此問題。

設置文本值this.setState({ text: '' })

獲取文本值this.state.text

使用this.handleChange = this.handleChange.bind(this)的原因是訪問this.setState中的this.setState。

在React中閱讀有關州的更多信息。

    import React, { Component } from "react";
    import Hello from "./Hello";

    class Test extends Component {
        constructor(props) {
        super(props);

        this.state = {
          text: ''
        }

        this.handleChange = this.handleChange.bind(this);
      }

      handleChange(e) {
        this.setState({
            text: e.target.value
        });
      }

    render() {
      return (
        <div>
          <h1>Test</h1>
          <form>
            <input value={this.state.text} onChange={e => this.handleChange(e)} />
            <button>Add</button>
          </form>
          <Hello name={this.state.text} />
        </div>
      );
    }
  }

  export default Test;