在 React 中重新渲染 class

Question

new to React, I'm testing to write a small program where you select a name in a list, and then a proverb should be displayed. The event handler handleAuthorClick is called, and setState is also called, but the new text is not displayed.

Why?

class AuthorList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: -1,
      text: "When in Rome do as the Romans",
    }
  }

  handleAuthorClick()
  {
       let txt = "initial value";
       var sel = document.getElementById("author-list"); 
       switch (parseInt(sel.value))
        {
          case 12 : txt = "When in Rome do as the Romans"; break;
          case 33: txt = "If you tell the truth, you don't have to remember anything.";break;
          case 256: txt = "History will be kind to me for I intend to write it";break;
          default:;
        }
       this.setState({text: txt});
  }

  render() {
      return (
        <div className="author-list">
          <h2>Author List</h2>
          <select id='author-list' name='author-list' size='15' onClick={() => this.handleAuthorClick()>
             <option value="12">Unknown</option>
             <option value="33">Mark Twain</option>
             <option value="256">Winston Churchill</option>
          </select>
          <h2>Proverbs</h2>
          {this.props.text}
        </div>
      );
    }
  }

class ProVerbMain extends React.Component {
      render() {
      return (
        <div className="proverb">
          <h1>Dans proverbs</h1>
          <div className="author-list">
            <AuthorList text = 'Initial value'/>
          </div>
        </div>
      );
    }
  }

ReactDOM.render(<ProVerbMain />, document.getElementById('root'));

Answer 1

Use this.state.text instead of this.props.text , because it's a local state of your component. When you use this.props.text your component doesn't know the new state for new render. You should use onChange() event instead of onClick() in select option

Answer 2

this should work for you, use onChange rather than onClick . also you were using class methods handleAuthorClick() and not even binding them to class's this as function have their own this scope, you can't access class members from inside that function, that's why either use () => {} or use .bind(this) in class's constructor

EDIT: https://reactjs.org/docs/forms.html#the-select-tag

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

import "./styles.css";
class AuthorList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: -1,
      text: "When in Rome do as the Romans"
    };
  //this.handleAuthorClick = this.handleAuthorClick.bind(this); 
  }

  handleAuthorClick = e => {
    let txt = this.props.text;
    console.log(e.target.value);
    switch (e.target.value) {
      case "12":
        txt = "When in Rome do as the Romans";
        break;
      case "33":
        txt = "If you tell the truth, you don't have to remember anything.";
        break;
      case "256":
        txt = "History will be kind to me for I intend to write it";
        break;
      default:
    }
    // alert(txt);
    this.setState({ text: txt });
  };

  render() {
    return (
      <div className="author-list">
        <h2>Author List</h2>
        <select name="author-list" size="15" onChange={this.handleAuthorClick}>
          <option value="12">Unknown</option>
          <option value="33">Mark Twain</option>
          <option value="256">Winston Churchill</option>
        </select>
        <h2>Proverbs</h2>
        {this.state.text}
      </div>
    );
  }
}

class ProVerbMain extends React.Component {
  render() {
    return (
      <div className="proverb">
        <h1>Dans proverbs</h1>
        <div className="author-list">
          <AuthorList text="Initial value" />
        </div>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<ProVerbMain />, rootElement);

demo: https://codesandbox.io/s/react-hooks-counter-demo-yj3s5

Answer 3

You've to use state instead of props.

import React from "react";

class AuthorList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: -1,
      text: "When in Rome do as the Romans"
    };
  }

  handleAuthorClick() {
    let txt = "initial value";
    var sel = document.getElementById("author-list");
    switch (parseInt(sel.value, 10)) {
      case 12:
        txt = "When in Rome do as the Romans";
        break;
      case 33:
        txt = "If you tell the truth, you don't have to remember anything.";
        break;
      case 256:
        txt = "History will be kind to me for I intend to write it";
        break;
      default:
    }
    //alert(txt);
    this.setState({ text: txt });
  }

  render() {
    const { text } = this.state;
    return (
      <div className="author-list">
        <h2>Author List</h2>
        <select
          id="author-list"
          name="author-list"
          size="15"
          onClick={() => this.handleAuthorClick()}
        >
          <option value="12">Unknown</option>
          <option value="33">Mark Twain</option>
          <option value="256">Winston Churchill</option>
        </select>
        <h2>Proverbs</h2>
        {text}
      </div>
    );
  }
}

class ProVerbMain extends React.Component {
  render() {
    return (
      <div className="proverb">
        <h1>Dans proverbs</h1>
        <div className="author-list">
          <AuthorList text="Initial value" />
        </div>
      </div>
    );
  }
}

export default ProVerbMain;

And here is your working sandbox link https://codesandbox.io/s/still-grass-r5iz9/