通过按钮输出名称

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.setState({name:'John'}) ///&nbsp;... this.setState({name:'Donald'})同样，仅构造函数的开头应以大写字母开头，而不是方法，应将函数重命名John为john。