Javascript 在React中重新呈现类

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

为什么?

类AuthorList扩展了React.Component{ 建造师（道具）{ 超级（道具）； 此.state={ 值：-1， 文字：“入乡随俗”， } } handleAuthorClick（） { 设txt=“初始值”； var sel=document.getElementById（“作者列表”）； 开关（parseInt（选择值）） { 案例12:txt=“在罗马时按罗马人的方式行事”中断； 案例33:txt=“如果你说的是实话，你就不必记住任何事情。”打破； 案例256:txt=“历史会对我很好，因为我打算写它”中断； 违约：； } this.setState（{text:txt}）； } render（）{ 返回( 作者名单 此.handleAuthorClick（）> 不为人知 马克·吐温 温斯顿·丘吉尔 谚语 {this.props.text} ); } } 类扩展了React.Component{ render（）{ 返回( 丹麦谚语 ); } } ReactDOM.render（，document.getElementById（'root'））；

---

使用

this.state.text

而不是

this.props.text

，因为它是组件的本地状态。使用

this.props.text

时，组件不知道新渲染的新状态。

---

您应该在选择选项中使用

onChange（）

事件而不是

onClick（）

使用

this.state.text

而不是

this.props.text

，因为它是组件的本地状态。使用

this.props.text

时，组件不知道新渲染的新状态。

---

您应该在选择选项中使用

onChange（）

事件，而不是

onClick（）

这应该适合您，使用

onChange

而不是

onClick

。 另外，您使用了类方法

handleAuthorClick（）

，甚至没有将它们绑定到类的

this

，因为函数有自己的

this

作用域，您不能从该函数内部访问类成员，这就是为什么在类的构造函数中使用

（）=>{}

或使用

绑定（this）

编辑：

import React，{useffect}来自“React”；
从“react dom”导入react dom；
导入“/styles.css”；
类AuthorList扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
值：-1，
正文：“入乡随俗”
};
//this.handleAuthorClick=this.handleAuthorClick.bind（this）；
}
handleAuthorClick=e=>{
设txt=this.props.text；
console.log（如target.value）；
开关（如目标值）{
案例“12”：
txt=“在罗马时，要像罗马人那样做”；
打破
案例“33”：
txt=“如果你说的是实话，你就不必记住任何事情。”；
打破
案例“256”：
txt=“历史会对我很好，因为我打算写它”；
打破
违约：
}
//警报（txt）；
this.setState（{text:txt}）；
};
render（）{
返回(
作者名单
不为人知
马克·吐温
温斯顿·丘吉尔
谚语
{this.state.text}
);
}
}
类扩展了React.Component{
render（）{
返回(
丹麦谚语
这应该适用于您，请使用
onChange
而不是
onClick
。
另外，您使用了类方法
handleAuthorClick（）
，甚至没有将它们绑定到类的
this
，因为函数有自己的
this
作用域，您不能从该函数内部访问类成员，这就是为什么在类的构造函数中使用
（）=>{}
或使用
绑定（this）

编辑：

import React，{useffect}来自“React”；
从“react dom”导入react dom；
导入“/styles.css”；
类AuthorList扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
值：-1，
正文：“入乡随俗”
};
//this.handleAuthorClick=this.handleAuthorClick.bind（this）；
}
handleAuthorClick=e=>{
设txt=this.props.text；
console.log（如target.value）；
开关（如目标值）{
案例“12”：
txt=“在罗马时，要像罗马人那样做”；
打破
案例“33”：
txt=“如果你说的是实话，你就不必记住任何事情。”；
打破
案例“256”：
txt=“历史会对我很好，因为我打算写它”；
打破
违约：
}
//警报（txt）；
this.setState（{text:txt}）；
};
render（）{
返回(
作者名单
不为人知
马克·吐温
温斯顿·丘吉尔
谚语
{this.state.text}
);
}
}
类扩展了React.Component{
render（）{
返回(
丹麦谚语
你必须使用状态而不是道具

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;


从“React”导入React；
类AuthorList扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
值：-1，
正文：“入乡随俗”
};
}
handleAuthorClick（）{
设txt=“初始值”；
var sel=document.getElementById（“作者列表”）；
开关（parseInt（选择值，10））{
案例12：
txt=“在罗马时，要像罗马人那样做”；
打破
案例33：
txt=“如果你说的是实话，你就不必记住任何事情。”；
打破
案例256：
txt=“历史会对我很好，因为我打算写它”；
打破
违约：
}
//警报（txt）；
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);


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;