javascript - 如何制作循环以重用函数

Question

我有一个包含多个按钮的组件，可以添加一个持续 300 毫秒的类。现在，如果我按下这些按钮中的任何一个，所有按钮都会同时收到类(class)。我需要通过按下每个声音，只有他收到类(class)，而不是其余的按钮。

如何创建一个循环来重用一个函数？我想我的问题是我不知道如何循环我的函数“更新”并且我只选择我按下的按钮并在同一个“div”中添加类

我使用@josemartindev 更改来编辑我的代码:

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

    update(number) {
        console.log("You clicked number " + number);
        let v = []
        for (var i = 0; i < this.props.addClicked.length; i++)
        {
            if (number === i)
                this.setState({
                    addClicked: "clicked"
                });
            else
                this.setState({
                    addClicked: []
                });
        }

        this.setState({
            addClicked: v
        })

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

        console.log(v)

    }

    render(){
        return(            
            <div className="pad sb-content">
                <div className="dial-pad">
                    <div className="phoneString">
                        <input type="text"/>
                    </div>
                    <div className="digits">
                    <Numbers 
                        numbers={this.state.numbers} 
                        letters={this.state.letters}
                        addClicked={this.props.addClicked}  
                        update={this.update}
                    />
                    </div>

                    <div className="digits">
                        <div id="nuevo-contacto"><Icon id="nuevo-contacto" icon="nuevo-usuario" className='dig addPerson action-dig ico-nuevo-usuario'/></div>
                        <div className="dig goBack action-dig"><Icon icon="borrar" className='ico-borrar'/></div>
                    </div>
                </div>

                <div className="call-pad">
                    <div id="ca-number" className="ca-number">1234567890</div>
                    <div className="ca-status" data-dots="...">Llamando</div>
                    <div className="ca-buttons">
                        <div id="mute" className="ca-b-single" data-label="Mute"><a><Icon icon="audio" className='ico-audio'/><Icon icon="mute" className='ico-mute'/></a></div>
                        <div id="hold" className="ca-b-single" data-label="Hold"><a><Icon icon="musica" className='ico-musica'/></a></div>
                        <div id="transferir" className="ca-b-single" data-label="Transferir"><a><Icon icon="transferir" className='ico-transferir'/></a></div>
                        <div id="keypad" className="ca-b-single" data-label="Teclado"><a><Icon icon="keypad" className='ico-keypad'/></a></div>
                    </div>
                </div>

                <div className="call action-dig">
                    <div className="call-change"><span></span></div>
                    <div className="call-icon"><Icon icon="telefono" className='ico-telefono'/></div>
                </div>
            </div>  
        );
    }
}

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

    render() {
        return (
            <>            
                <div className={"dig pound number-dig "+ this.props.addClicked} onClick={this.props.update.bind(this, "1")}>{this.props.numbers[0]}<div class="sub-dig">{this.props.letters[0]}</div></div>
                <div className={"dig pound number-dig "+ this.props.addClicked} onClick={this.props.update.bind(this, "2")}>{this.props.numbers[1]}<div class="sub-dig">{this.props.letters[2]}</div></div>
                <div className={"dig pound number-dig "+ this.props.addClicked} onClick={this.props.update.bind(this, "3")}>{this.props.numbers[2]}<div class="sub-dig">{this.props.letters[2]}</div></div>
                <div className={"dig pound number-dig "+ this.props.addClicked} onClick={this.props.update.bind(this, "4")}>{this.props.numbers[3]}<div class="sub-dig">{this.props.letters[3]}</div></div>
                <div className={"dig pound number-dig "+ this.props.addClicked} onClick={this.props.update.bind(this, "5")}>{this.props.numbers[4]}<div class="sub-dig">{this.props.letters[4]}</div></div>
                <div className={"dig pound number-dig "+ this.props.addClicked} onClick={this.props.update.bind(this, "6")}>{this.props.numbers[5]}<div class="sub-dig">{this.props.letters[5]}</div></div>
                <div className={"dig pound number-dig "+ this.props.addClicked} onClick={this.props.update.bind(this, "7")}>{this.props.numbers[6]}<div class="sub-dig">{this.props.letters[6]}</div></div>
                <div className={"dig pound number-dig "+ this.props.addClicked} onClick={this.props.update.bind(this, "8")}>{this.props.numbers[7]}<div class="sub-dig">{this.props.letters[7]}</div></div>
                <div className={"dig pound number-dig "+ this.props.addClicked} onClick={this.props.update.bind(this, "9")}>{this.props.numbers[8]}<div class="sub-dig">{this.props.letters[8]}</div></div>
                <div className={"dig pound number-dig "+ this.props.addClicked} onClick={this.props.update.bind(this, "10")}>{this.props.numbers[9]}<div class="sub-dig">{this.props.letters[9]}</div></div>
                <div className={"dig pound number-dig "+ this.props.addClicked} onClick={this.props.update.bind(this, "11")}>{this.props.numbers[10]}<div class="sub-dig">{this.props.letters[10]}</div></div>
                <div className={"dig pound number-dig "+ this.props.addClicked} onClick={this.props.update.bind(this, "12")}>{this.props.numbers[11]}<div class="sub-dig">{this.props.letters[11]}</div></div>
        </>
        );
    }
}

我想重用的附加功能是 updat 并且 addclicked 状态未应用于任何元素 ...

我需要更新功能来仅将类添加到按下的按钮，有人知道该怎么做吗？现在它对我不起作用

解释更改按钮

当我点击5时我需要在dig“dig pound number-dig”中添加“clicked”类，此时它会消失，因为它是缩放效果。我的代码

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

应该这样做。 clicked 应该只添加到点击然后消失的按钮上，不应该添加到所有按钮上。我无法通过该类(class)，尽管在这些更改开始之前如果它起作用并且我单击了所有元素(并且我希望它只在一个按钮上)。这是一种切换效果，通过按下任何按钮，类只会添加到该按钮中。

Answer 1

您正在寻找这样的东西吗？在下面查看我的演示。

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'));

Demo