Question

我有一个div，其中应通过按按钮显示名称。下面的两个按钮，如果单击第一个，则应显示John名称，如果单击第二个，则应显示Donald。错误在哪里？

import React, { Component } from 'react';


class trueName extends Component {
  constructor(props) {
    this.state = {
      name: {},
    };
  }

  john = ()=>{
    const {name}= this.state;
    this.setState({name:"John"})
  }

  donald = ()=>{
    const {name}= this.state;
    this.setState({name:"Donald"})
  }

render() {
    return(
      <div >
        <div className="SelectName">
          <span>{this.name}</span>
        </div>

        <button
        className = "one"
        onClick={ this.john}>
          <span>My name John</span>
        </button>

        <button
        className = "two"
        onClick={ this.donald}
        >
          <span>My name Donald</span>
        </button>
      </div>

    )
  }
}

export default trueName;

Answer 1

正如其他人所提到的，您需要将值设置为字符串。

但是，当您显示该值时，就会出现错误。当您要显示的是this.name

时，您正在寻找this.state.name

Answer 2

您需要使用'，"或```将name的值设置为字符串：

this.setState({name:'John'})
/// ...
this.setState({name:'Donald'})

也只能在构造函数的开头加上大写字母，而不是在方法的开头，将函数John重命名为john。

通过按钮输出名称

2 个答案: