Question

我正在尝试从此

中读取值

<th scope="row" onClick={this.handleClick} value="test2">Test</th>

但是我无法获得该值，最终在handleClick方法中未定义。我可以使用handleClick发送一个参数（＆＃34; test＆＃34;）但我希望使用event.target.value读取值，但我无法使用它。

this.setState({clicked: event.target.value}, () => {console.log(this.state.clicked)}); <---- return Undefined

console.log("clicked", event.target); <---- return <th scope="row" value="test2">Test</th>

console.log("clicked", event.target.value); <--- Undefined

完整代码

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

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {};

    // This binding is necessary to make `this` work in the callback
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(event) {

    this.setState({clicked: event.target.value}, () => {console.log(this.state.clicked)});
    //console.log("clicked", info);
    console.log("clicked", event.target.value);
  }

    render() {
        return (
            <div className="App">
                <header className="App-header">
                    <img src={logo} className="App-logo" alt="logo" />
                    <h1 className="App-title">Welcome to React</h1>
                </header>
                <p className="App-intro">
                    To get started, edit <code>src/App.js</code> and save to reload.
                </p>
                <table className="table">
                    <thead>
                        <tr>
                            <th scope="col">#</th>
                            <th scope="col">First Name</th>
                            <th scope="col">Last Name</th>
                            <th scope="col">Username</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <th scope="row" onClick={this.handleClick} value={"test2"}>Test</th>
                            <td>Mark</td>
                            <td>Otto</td>
                            <td>@mdo</td>
                        </tr>

                    </tbody>
                </table>
            </div>
        );
    }
}

export default App;

Answer 1

您需要使用data- *属性，因为th没有value属性。

<th scope="row" onClick={this.handleClick} data-value="test2">Test</th>

然后

event.target.dataset.value

截至

我可以使用handleClick("test")
发送参数

<th scope="row" onClick={() => this.handleClick('test2')}>Test</th>

我说这是最好的选择。除非你有充分的理由使用DOM作为数据源。确保您没有过早优化。

从反应中读取td的值

1 个答案: