Question

React的新手，我正在测试编写一个小程序，您可以在其中选择列表中的名称，然后显示谚语。事件处理程序handleAuthorClick被调用，setState也被调用，但是不显示新文本。

为什么？

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

使用this.state.text代替this.props.text，因为它是组件的本地状态。使用this.props.text时，组件不知道新渲染的新状态。您应该在选择选项

中使用onChange()事件而不是onClick()

Answer 2

这应该对您有用，请使用onChange而不是onClick。同样，您使用的是类方法handleAuthorClick()，甚至没有将它们绑定到类的this，因为函数具有自己的this范围，因此您无法从该函数内部访问类成员，这就是为什么在类的构造函数中使用() => {}或使用.bind(this)

编辑：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);

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

Answer 3

您必须使用状态而不是道具。

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;

这是您的工作沙盒链接https://codesandbox.io/s/still-grass-r5iz9/

在React中重新渲染类

3 个答案: