Question

我是ReactJs的新手，目前正在努力创建一个onClick事件，它将获取自身的href值并将其传递给一个名为'action'的函数。

然后，action函数应该阻止默认的浏览器行为，对传入的URL执行GET请求，并显示包含响应和状态的警告对话框。

但是我试图从onClick事件调用我的函数时遇到以下错误：

未捕获（在承诺中）ReferenceError：未定义操作

var Content = React.createClass({
    getInitialState: function() {
        return {
            teams: []
        }
    },

    componentDidMount: function() {
        const makeRequest = () => axios.get("http://localhost:5000/api/teams").then(({ data }) => this.setState({ teams: data }));

        this.serverRequest = makeRequest();

        this.poll = setInterval(() => {
            this.serverRequest = makeRequest();
        }, 10000)
    },

    componentWillUnmount: function() {
        this.serverRequest.abort();

        clearInterval(this.poll)
    },

    action: function(e) {
        e.preventDefault();

        $.get(e.href, function(res, status) {
            alert("Response: " + res + "\nStatus: " + status);
        });
    },

    render: function() {
        const { teams } = this.state;

        return (
            <div className="list-group">
                { teams.map(function(team) {
                    return ([
                        <a href={ "http://localhost:5000/api/teams?name=" + team.name} onClick={ action }>Click Me</a>
                    ]);
                })}
            </div>
        )
    }
});

ReactDOM.render(<Content />, document.getElementById('content'));

Answer 1

尝试使用alert代替this.action。

<强>更新

我发现了问题。一切都与范围有关。您无法访问action内的this。

map

Answer 2

这是一个具有约束力的问题，请尝试这样做：

render: function() {
    const { teams } = this.state;

    return (
        <div className="list-group">
            { teams.map((team,i)=>{
                    return <a key={i} href={ "http://localhost:5000/api/teams?name=" + team.name} onClick={ this.action }>Click Me</a>
                })
            }
        </div>
    )
}

建议：每当动态创建html元素时，始终为每个元素分配唯一键，key值将使您的组件唯一标识。

来自Facebook React Doc：

键帮助React识别哪些项目已更改，已添加或已删除。应该给出数组内部元素的键，以使元素具有稳定的标识。

Answer 3

就我而言，我忘记了使用该功能。所以我的建议是，请检查功能是否正确导入。

未捕获（在承诺中）ReferenceError：未定义<function>

3 个答案: