Javascript 如何创建循环以重用函数

我有一个包含多个按钮的组件，可以添加一个300毫秒的类。现在，如果我按下其中任何一个按钮，所有按钮都会同时接收该类。我需要通过按每个声音，只有他接收课堂，而不是其他按钮

如何创建循环以重用函数？ 我认为我的问题是，我不知道如何循环我的函数更新，我只选择我按下的按钮并将类添加到同一个div中

我使用@josemartindev更改编辑代码：

---

我应该这样做。单击只应添加到单击后消失的按钮，而不应添加到所有按钮。我无法通过该类，尽管在这些更改开始之前，它是否有效，我单击了所有元素，我希望它仅在按钮上。这是一种切换效果，通过按下任何按钮，类只会添加到其中。

您正在寻找类似的内容吗？检查我的演示下面

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';

class App extends Component {
  constructor() {
    super();
    this.state = {
      numbers: [1, 2, 3, 4, 5, 6, 7, 8, 9, '*', 0, '#'],
      letters: ['', 'abc', 'def', 'ghi', 'jkl', 'mno', 'pqrs', 'tuv', 'wxyz', '', '', ''],
      numberClicked: [],
      addClicked: []
    };
  }

  componentWillMount()
  {
    const v = [];
    for (var i = 0; i < 12; i++)
      v.push("notClicked")
    this.setState({
      addClicked: v
    })
    //console.log(v)
  }

  update = (number) => {
    const n = [...this.state.numberClicked]
    const c = [...this.state.addClicked]
    c[number - 1] = 'clicked'
    console.log(c)
    n.push(number)
    this.setState({
      numberClicked: n,
      addClicked: c 
    }, () => {
        let a = "";
        for (var i in this.state.numberClicked)
        {
          a = a + this.state.numberClicked[i] + " "
        }
        console.log("All Values: ", a)
    })
  }

  render() {
    return (
      <Numbers numbers={this.state.numbers} letters={this.state.letters} update={this.update}/>
    );
  }
}

class Numbers extends Component {
  constructor(props) {
    super(props)
  }

  render() {
    return (
      <div className="parent-wrapper">
        <div className="parent">
            <div className="child" onClick={this.props.update.bind(this, "1")}><h1>{this.props.numbers[0]}</h1><p>{this.props.letters[0]}</p></div>
            <div className="child" onClick={this.props.update.bind(this, "2")}><h1>{this.props.numbers[1]}</h1><p style={{marginLeft: "16px"}}>{this.props.letters[1]}</p></div>
            <div className="child" onClick={this.props.update.bind(this, "3")}><h1>{this.props.numbers[2]}</h1><p style={{marginLeft: "17px"}}>{this.props.letters[2]}</p></div>
            <div className="child" onClick={this.props.update.bind(this, "4")}><h1>{this.props.numbers[3]}</h1><p style={{marginLeft: "17px"}}>{this.props.letters[3]}</p></div>
            <div className="child" onClick={this.props.update.bind(this, "5")}><h1>{this.props.numbers[4]}</h1><p style={{marginLeft: "20px"}}>{this.props.letters[4]}</p></div>
            <div className="child" onClick={this.props.update.bind(this, "6")}><h1>{this.props.numbers[5]}</h1><p style={{marginLeft: "14px"}}>{this.props.letters[5]}</p></div>
            <div className="child" onClick={this.props.update.bind(this, "7")}><h1>{this.props.numbers[6]}</h1><p style={{marginLeft: "13px"}}>{this.props.letters[6]}</p></div>
            <div className="child" onClick={this.props.update.bind(this, "8")}><h1>{this.props.numbers[7]}</h1><p style={{marginLeft: "17px"}}>{this.props.letters[7]}</p></div>
            <div className="child" onClick={this.props.update.bind(this, "9")}><h1>{this.props.numbers[8]}</h1><p style={{marginLeft: "12px"}}>{this.props.letters[8]}</p></div>
            <div className="child" onClick={this.props.update.bind(this, "10")}><h1>{this.props.numbers[9]}</h1><p>{this.props.letters[9]}</p></div>
            <div className="child" onClick={this.props.update.bind(this, "11")}><h1>{this.props.numbers[10]}</h1><p>{this.props.letters[10]}</p></div>
            <div className="child" onClick={this.props.update.bind(this, "12")}><h1>{this.props.numbers[11]}</h1><p>{this.props.letters[11]}</p></div>
        </div>
    </div>
    );
  }
}

render(<App />, document.getElementById('root'));

---

你好我试图使用你的代码，但效果不太好。我已经更新了我的代码，看看你是否能帮我。谢谢。@Casandra你想知道吗？例如：如果我按5和6，将数字5和6存储在一个字符串中，以便以后使用？我可以帮你是的，这是我想做的下一件事。我更新了我的demo@Cassandra。打开下面的控制台并单击数字。我创建了一个类编号，因为它们总是相同的。您的更改对我来说非常完美，但我仍然有一个初始问题，当我单击按钮时，我无法获得更新函数来添加单击的类

this.change = setTimeout (() => {
      this.setState ({
          addClicked: []
      })
}, 300)

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';

class App extends Component {
  constructor() {
    super();
    this.state = {
      numbers: [1, 2, 3, 4, 5, 6, 7, 8, 9, '*', 0, '#'],
      letters: ['', 'abc', 'def', 'ghi', 'jkl', 'mno', 'pqrs', 'tuv', 'wxyz', '', '', ''],
      numberClicked: [],
      addClicked: []
    };
  }

  componentWillMount()
  {
    const v = [];
    for (var i = 0; i < 12; i++)
      v.push("notClicked")
    this.setState({
      addClicked: v
    })
    //console.log(v)
  }

  update = (number) => {
    const n = [...this.state.numberClicked]
    const c = [...this.state.addClicked]
    c[number - 1] = 'clicked'
    console.log(c)
    n.push(number)
    this.setState({
      numberClicked: n,
      addClicked: c 
    }, () => {
        let a = "";
        for (var i in this.state.numberClicked)
        {
          a = a + this.state.numberClicked[i] + " "
        }
        console.log("All Values: ", a)
    })
  }

  render() {
    return (
      <Numbers numbers={this.state.numbers} letters={this.state.letters} update={this.update}/>
    );
  }
}

class Numbers extends Component {
  constructor(props) {
    super(props)
  }

  render() {
    return (
      <div className="parent-wrapper">
        <div className="parent">
            <div className="child" onClick={this.props.update.bind(this, "1")}><h1>{this.props.numbers[0]}</h1><p>{this.props.letters[0]}</p></div>
            <div className="child" onClick={this.props.update.bind(this, "2")}><h1>{this.props.numbers[1]}</h1><p style={{marginLeft: "16px"}}>{this.props.letters[1]}</p></div>
            <div className="child" onClick={this.props.update.bind(this, "3")}><h1>{this.props.numbers[2]}</h1><p style={{marginLeft: "17px"}}>{this.props.letters[2]}</p></div>
            <div className="child" onClick={this.props.update.bind(this, "4")}><h1>{this.props.numbers[3]}</h1><p style={{marginLeft: "17px"}}>{this.props.letters[3]}</p></div>
            <div className="child" onClick={this.props.update.bind(this, "5")}><h1>{this.props.numbers[4]}</h1><p style={{marginLeft: "20px"}}>{this.props.letters[4]}</p></div>
            <div className="child" onClick={this.props.update.bind(this, "6")}><h1>{this.props.numbers[5]}</h1><p style={{marginLeft: "14px"}}>{this.props.letters[5]}</p></div>
            <div className="child" onClick={this.props.update.bind(this, "7")}><h1>{this.props.numbers[6]}</h1><p style={{marginLeft: "13px"}}>{this.props.letters[6]}</p></div>
            <div className="child" onClick={this.props.update.bind(this, "8")}><h1>{this.props.numbers[7]}</h1><p style={{marginLeft: "17px"}}>{this.props.letters[7]}</p></div>
            <div className="child" onClick={this.props.update.bind(this, "9")}><h1>{this.props.numbers[8]}</h1><p style={{marginLeft: "12px"}}>{this.props.letters[8]}</p></div>
            <div className="child" onClick={this.props.update.bind(this, "10")}><h1>{this.props.numbers[9]}</h1><p>{this.props.letters[9]}</p></div>
            <div className="child" onClick={this.props.update.bind(this, "11")}><h1>{this.props.numbers[10]}</h1><p>{this.props.letters[10]}</p></div>
            <div className="child" onClick={this.props.update.bind(this, "12")}><h1>{this.props.numbers[11]}</h1><p>{this.props.letters[11]}</p></div>
        </div>
    </div>
    );
  }
}

render(<App />, document.getElementById('root'));