React JS，使用onClick中的参数更改状态吗？

Question

我需要在点击时输入参数，以发送字符串，具体取决于某人单击的按钮。我意识到要设置参数，我需要在render () {}内部创建一个函数，但是现在当我尝试使用this.setState({zone: location})时，出现以下错误：

TypeError: Cannot read property 'setState' of undefined

这是我的代码：

import React, { Component } from "react";
import "./styles/homeStyle.css";
import timerIcon from "./styles/media/timer_clock.png";
import streaksIcon from "./styles/media/streaks_fire.png";
import guideIcon from "./styles/media/guide_meditation.png";

class Main extends Component {
    state = {
        zone: "home",
    };
    render() {
        return (
            <React.Fragment>
                <div id="diagonal_shape"></div>
                <div className="row">
                    <div className="col s12" id="title">
                        <h4 className="center-align">
                            Peaceful<span id="title_steps"> Steps</span>
                            <br />
                            {this.state.zone}
                        </h4>
                    </div>
                    <div id="nav_bar">
                        <div className="col s4" id="goto_timer">
                            <p className="center-align">
                                <img src={timerIcon} width="60%" alt="clock" onClick={() => goTo("timer")} />
                                <br />
                                Timer
                            </p>
                        </div>
                        <div className="col s4">
                            <p className="center-align">
                                <img src={streaksIcon} width="60%" alt="fire" onClick={() => goTo("stats")} />
                                <br />
                                Stats
                            </p>
                        </div>
                        <div className="col s4">
                            <p className="center-align">
                                <img src={guideIcon} width="60%" alt="meditating" onClick={() => goTo("guides")} />
                                <br />
                                Guides
                            </p>
                        </div>
                    </div>
                </div>
            </React.Fragment>
        );
        function goTo(location) {
            console.log("yes " + location);
            this.setState({ zone: location });
        }
    }
}

export default Main;

我很确定这是因为我不能在render函数中使用this.setState（{}），但是我对如何使它工作感到困惑。

Answer 1

您不能在类方法中定义函数。将goTo方法定义为class方法，然后在单击按钮时像this.goto("some string")一样调用它。

您需要将bind this转换为goTo方法，或仅使用arrow function。

class Main extends Component {

    constructor(props) {
        super(props)
        this.state = {
            zone: "home",
        };
        this.goTo = this.goTo.bind(this);
    }

    goTo(location) {
        console.log("yes " + location);
        this.setState({ zone: location });
    }

    render() {
        return (
            <React.Fragment>
                <div id="diagonal_shape"></div>
                <div className="row">
                    <div className="col s12" id="title">
                        <h4 className="center-align">
                            Peaceful<span id="title_steps"> Steps</span>
                            <br />
                            {this.state.zone}
                        </h4>
                    </div>
                    <div id="nav_bar">
                        <div className="col s4" id="goto_timer">
                            <p className="center-align">
                                <img src={timerIcon} width="60%" alt="clock" onClick={() => this.goTo("timer")} />
                                <br />
                                Timer
                            </p>
                        </div>
                        <div className="col s4">
                            <p className="center-align">
                                <img src={streaksIcon} width="60%" alt="fire" onClick={() => this.goTo("stats")} />
                                <br />
                                Stats
                            </p>
                        </div>
                        <div className="col s4">
                            <p className="center-align">
                                <img src={guideIcon} width="60%" alt="meditating" onClick={() => this.goTo("guides")} />
                                <br />
                                Guides
                            </p>
                        </div>
                    </div>
                </div>
            </React.Fragment>
        );
    }
}
export default Main;