时间戳

首页 > 解决方案 > 我有一个非常基本的反应程序，但它不起作用

javascript - 我有一个非常基本的反应程序，但它不起作用

问题描述

我尝试了一个非常基本的反应程序，其中我有三个button写了一些东西，每当有人点击它时，我的h1标签应该显示button被点击的值。

import React, {Component} from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  constructor() {
    super(); 
    this.state = {
      title: '',
    }
  }
  handleClick = (e) => {
    this.setState({title: e.currentTarget.value}, () => console.log(this.state.title))
  }
  render(){
    return <div className = 'container'>
    <h1>{this.state.title}</h1>
    <button onClick = {this.handleClick}>Hello World</button>
    <button onClick = {this.handleClick}>Bye World</button>
    <button onClick = {this.handleClick}>Good Bye World</button>
    </div>
  }
}

export default App;

当我记录我的事件时，我看到 的值event.currentTarget.name设置为“当前目标”（这很奇怪），目标值为null. 我究竟做错了什么？

标签： javascriptreactjsreact-dom

解决方案

按钮的值由它的value属性和namebutname属性决定。您的按钮没有value 或 name属性。

可能您正在寻找e.currentTarget.textContent？

推荐阅读