How to implement the react Click event
This article introduces the relevant knowledge of "how to realize the react click event". In the operation of the actual case, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!
Pass the array subscript to the click event file
First, we create a new project, then define an array, and render the loop in the component, bind each rendered li component to the relative keystrokes and click events, and finally pass the key parameters in the component to the handleClick function, as follows:
Const A = 65 class Alphabet extends React.Component {constructor (props) {super (props); this.handleClick = this.handleClick.bind (this); this.state = {justClicked: null,letters: Array.from ({length: 26}, (_, I) = > String.fromCharCode (A + I))};} handleClick (letter) {this.setState ({justClicked: letter}) } render () {return (Just clicked: {this.state.justClicked} {this.state.letters.map (letter = > this.handleClick (letter)} > {letter})})} 2. Pass custom attributes to the click event file
By defining the letter value of the property, and then getting the value through e.target.dataset. The code is as follows:
Const A = 65 class Alphabet extends React.Component {constructor (props) {super (props); this.handleClick = this.handleClick.bind (this); this.state = {justClicked: null, letters: Array.from ({length: 26}, (_, I) = > String.fromCharCode (A + I))};} handleClick (e) {this.setState ({justClicked: e.target.dataset.letter}) } render () {return (Just clicked: {this.state.justClicked} {this.state.letters.map (letter = > {letter})})}} "how to implement the react Click event" is here. Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!
