我有一个带有多个按钮的组件，这些按钮添加了300毫秒的类。现在，如果我按下其中任何一个按钮，则所有按钮将同时接收课程。我需要按每个声音，只有他才能上课，而不是其余按钮。
如何进行循环以重用功能？
我认为我的问题是我不知道如何loop我的函数“更新”，并且我只选择按下的按钮并将类添加到同一“ 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状态未应用于任何元素...
我需要update函数将类仅添加到所按下的按钮上，有人知道该怎么做吗？现在，它对我不起作用
解释更改按钮
当我单击5时，我需要在dig的“ dig pound number-dig”中添加“ clicked”类，由于它是缩放效果，因此它现在会消失。我的代码
this.change = setTimeout (() => {
this.setState ({
addClicked: []
})
}, 300)
应该这样做。单击应仅添加到单击然后消失的按钮上，而不应将其添加到所有按钮上。我无法通过该课程，尽管在这些更改开始之前，如果它可以正常工作并且我单击了所有元素（并且我希望仅在一个按钮上）。这是一种切换效果，通过按下任意按钮，仅在其中添加类。
答案 0 :(得分：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'));