[英]How can I toggle only one button at a time onclick?
我想知道我如何能夠一次將一個按鈕切換為綠色 onclick。 使用我當前的代碼,當我單擊一個(意圖將其中一個切換為綠色)時,它也會將其他三個按鈕切換為綠色。
注意: white-btn
和green-btn
是我定義的 CSS 類。
我已經做了太多嘗試在這里列出來嘗試糾正這個問題。 我究竟做錯了什么?
constructor(props) {
super(props);
this.state = {
white: true,
smallSize: false,
mediumSize: false,
largeSize: false,
xLargeSize: false,
};
this.smallClicked = this.smallClicked.bind(this);
this.mediumClicked = this.mediumClicked.bind(this);
this.largeClicked = this.largeClicked.bind(this);
this.xLargeClicked = this.xLargeClicked.bind(this);
}
smallClicked() {
console.log("clicked small");
this.setState({smallSize: true, mediumSize: null, largeSize: null, xLargeSize: null, white: !this.state.white});
}
mediumClicked() {
console.log("clicked medium");
this.setState({mediumSize: true, smallSize: null, largeSize: null, xLargeSize: null, white: !this.state.white});
}
largeClicked() {
console.log("clicked large");
this.setState({largeSize: true, smallSize: null, mediumSize: null, xLargeSize: null, white: !this.state.white});
}
xLargeClicked() {
console.log("clicked x-large");
this.setState({xLargeSize: true, smallSize: null, mediumSize: null, largeSize: null, white: !this.state.white});
}
render() {
let color_switch_size = this.state.white ? "white-btn" : "green-btn";
return(
<button className={color_switch_size} onClick={this.smallClicked}>Small</button>
<button className={color_switch_size} onClick={this.mediumClicked}>Medium</button>
<button className={color_switch_size} onClick={this.largeClicked}>Large</button>
<button className={color_switch_size} onClick={this.xLargeClicked}>X-Large</button>
);
}
一種方法是使用 class 來處理點擊的 state,例如“greenClas”。
對於每個按鈕,添加 class 以防它被點擊或未被點擊。
return(
<button className={`buttonClass ${this.state.smallSize} ? 'greenClass' : ''`} onClick={this.smallClicked}>Small</button>
...
);
我會改變一些關於它的結構的事情。 我將使用單個更改處理程序,不再使用white
變量。
這是我的建議:
const initialValues = {
small: false,
medium: false,
large: false,
x_large: false,
};
.....
constructor(props) {
super(props);
this.state = {...initialValues};
}
// We'll use a generic handler that receives the button name
handleClick = (button) => (e) => {
// Update the button to be the opposite of what it was before
this.setState({[button]: !this.state[button]});
// OR
// If you want to restrict it to one white button at a time
this.setState({
...initialValues,
[button]: !this.state[button]
});
}
// Separate this into its own function to keep render cleaner
getClassName = (button) => {
// if button is set to true, use white
if (this.state[button]) {
return "white-btn";
}
// else use green
return "green-btn";
}
render() {
// Now each button has its class name managed independently
return(
<>
<button
className={this.getClassName('small')}
onClick={this.handleClick('small')}
>
Small
</button>
<button
className={this.getClassName('medium')}
onClick={this.handleClick('medium')}
>
Medium
</button>
<button
className={this.getClassName('large')}
onClick={this.handleClick('large')}
>
Large
</button>
<button
className={this.getClassName('x_large')}
onClick={this.handleClick('x_large')}
>
X-Large
</button>
</>
);
}
這是我的想法。 我只是在應用樣式之前添加一個小條件來驗證按鈕
constructor(props) {
super(props);
this.state = {
white: true,
smallSize: false,
mediumSize: false,
largeSize: false,
xLargeSize: false
};
this.smallClicked = this.smallClicked.bind(this);
this.mediumClicked = this.mediumClicked.bind(this);
this.largeClicked = this.largeClicked.bind(this);
this.xLargeClicked = this.xLargeClicked.bind(this);
}
smallClicked() {
console.log("clicked small");
this.setState({
smallSize: true,
mediumSize: null,
largeSize: null,
xLargeSize: null,
white: !this.state.white
});
}
mediumClicked() {
console.log("clicked medium");
this.setState({
mediumSize: true,
smallSize: null,
largeSize: null,
xLargeSize: null,
white: !this.state.white
});
}
largeClicked() {
console.log("clicked large");
this.setState({
largeSize: true,
smallSize: null,
mediumSize: null,
xLargeSize: null,
white: !this.state.white
});
}
xLargeClicked() {
console.log("clicked x-large");
this.setState({
xLargeSize: true,
smallSize: null,
mediumSize: null,
largeSize: null,
white: !this.state.white
});
}
render() {
let color_switch_size = this.state.white ? "white-btn" : "green-btn";
return (
<React.Fragment>
<button
className={this.state.smallSize && color_switch_size}
onClick={this.smallClicked}
>
Small
</button>
<button
className={this.state.mediumSize && color_switch_size}
onClick={this.mediumClicked}
>
Medium
</button>
<button
className={this.state.largeSize && color_switch_size}
onClick={this.largeClicked}
>
Large
</button>
<button
className={this.state.xLargeSize && color_switch_size}
onClick={this.xLargeClicked}
>
X-Large
</button>
</React.Fragment>
);
}
this.state = {
small: true,
medium: true,
large: true,
xLarge: true,
}
changeColor = event => {
this.setState({ [event.target.name]: !this.state[event.target.name] });
}
getButtons = () => {
const sizes = ['small', 'medium', 'large', 'xlarge'];
return sizes.map(size => <button className={this.state[size] ? 'white-btn' : 'green-btn'} onClick={this.changeColor} name={size}>{size.toCamelCase()}</button>)
}
render() {
return (
<div>
{this.getButtons()}
</div>
)
}
我認為您可以以更簡單的方式實現這一目標。 該解決方案對您有用嗎?
constructor(props) {
super(props);
this.state = {
smallSize: false,
mediumSize: false,
largeSize: false,
xLargeSize: false
};
}
onButtonPress = buttonName => {
console.log('clicked ' + buttonName);
let myButtonsState = this.state;
myButtonsState[buttonName] = !myButtonsState[buttonName];
this.setState({
...myButtonsState
});
};
render() {
return (
<View>
<button
className={this.state.smallSize ? 'white-btn' : 'green-btn'}
onClick={() => this.onButtonPress('smallSize')}
>
Small
</button>
<button
className={this.state.mediumSize ? 'white-btn' : 'green-btn'}
onClick={() => this.onButtonPress('mediumSize')}
>
Medium
</button>
<button
className={this.state.largeSize ? 'white-btn' : 'green-btn'}
onClick={() => this.onButtonPress('largeSize')}
>
Large
</button>
<button
className={this.state.xLargeSize ? 'white-btn' : 'green-btn'}
onClick={() => this.onButtonPress('xLargeSize')}
>
X-Large
</button>
</View>
);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.