Question

我无法从React子组件访问event.target.value的值，但可以从HTML标记访问。

在给出的示例中：它不适用于Button标签（React Component），但适用于Button标签（html标签）。


import React from "react";
import Button from "./components/Button";

class Calculator extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            topText: "0"
        }
        this.handleClick = this.handleClick.bind(this);

    }

        handleClick(event) {
            this.setState({ topText: event.target.value })
        }

    render() {
        return (
            <div>
                <div>{this.state.topText}</div>
                <Button value='1' onClick={this.handleClick}/>
                <button value="2" onClick={this.handleClick}>2</button>
            </div>
        )
}
}

export default Calculator

Answer 1

您在按钮组件内部处理过onClick吗？如果不是，那就是原因。

在按钮组件上传递onClick道具时，在按钮组件内传递。

<button  onClick={onClick}/>

最后，onClick应该仅在Button内位于HTML组件上。

Answer 2

您不能在组件上使用onClick。它们必须位于DOM元素上（例如div，button等）。

在这里，Button是一个组件。解决方案是将onClick作为道具传递，并将其附加到Button组件中的元素上。

function Button(props) {
  return <button onClick={props.onClick}>Click Me</button>;
}

Answer 3

这是因为onClick是作为按钮组件的道具传递的。只要您在组件内部处理道具就可以了。

这应该在按钮组件内部。

render () {
    return <button  onClick={this.props.onClick}/>2</button>;
}

如何从React组件访问event.target.value

3 个答案: