我正在尝试编写一个处理按钮单击的函数。
我希望事情发生:
该函数获取一个字符串,并将名为“ chosenGenre”的状态更改为给定的字符串。
单击某个按钮时,它将调用该函数并返回一个字符串。
字符串/状态“ chosenGenre”已保存,因此以后可以在其他组件中使用它。
这是我写的内容,但是我认为单击按钮后传递字符串的方式不正确。
import React, { Component } from 'react';
import Genre from './Genre';
import './GenreSelectPage.css';
import Blues from '../Blues.png';
import Classical from '../Classical.png';
import Country from '../Country.png';
export default class GenreSelectPage extends Component{
state = {
chosenGenre: ""
}
handleClick = (genreName) => {
this.setState({chosenGenre: genreName});
}
render(){
return(
<div className = "GenreSelectPage">
<h3>Select your desired Kollab Room Genre</h3>
<Genre genrePicture= {Blues} genreClicked = {this.handleClick("blues")}/>
<Genre genrePicture= {Classical} genreClicked = {this.handleClick("Classical")}/>
<Genre genrePicture= {Country} genreClicked = {this.handleClick("Country")}/>
)
}
}
为了正确调用函数并保持结果,我应该更改什么?
最佳答案
问题是this.handleClick("blues")
在渲染过程中执行,它返回undefined,类似于genreClicked={undefined}
,并且具有计划3个异步setState
s的副作用。
您可以使用工厂函数返回可访问闭包变量的事件处理函数:
makeHandleClick = (genreName) => (event) => {
this.setState({ chosenGenre: genreName });
// console.assert(this.state.chosenGenre); // FYI: not possible, setState is async
}
render() {
...<Genre genrePicture={Blues} genreClicked={this.makeHandleClick("blues")} />
关于javascript - React中的功能无法正常工作,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/53915156/