我是React的超级新手，但总体上对javascript非常熟悉。在开始使用React时经历了非常艰难的时刻，并且想知道是否有人可以通过以下三个按钮向我解释我应该如何管理状态。
我的主要组成部分：
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
var classNames = require('classnames');
import classnames from 'classnames';
import Fans from './Buttons'
export default class Main extends React.Component {
constructor(props) {
super(props);
this.state = {
Buttons:[
{ src: '/src/images/1.svg',
button: 1
},
{ src: '/src/images/2.svg',
button: 2
},
{
src: '/src/images/3.svg',
button: 3
}
]
}
}
render() {
var buttons = this.state.Buttons.map(function(button){
return(<Buttons key={button.button}
buttNum={button.button}
src={button.src}
/>);
})
return (
<div>
{buttons}
</div>
);
}
};
我的按钮组件：
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import classnames from 'classnames';
var classNames = require('classnames');
export default class Buttons extends React.Component {
constructor(props) {
super(props);
this.state = {isActive: false}
this.selectButton = this.selectButton.bind(this)
}
selectButton() {
let active = !this.state.isActive;
this.setState({isActive: active})
}
render() {
let classes = classnames('btn-success', {selected: this.state.isActive});
return (
<img src={this.props.src}
buttNum={this.props.key}
onClick={this.selectButton}
className={classes} />
);
}
};
如何管理单个按钮上的状态？为什么这么难实现...使用jQuery或Angular，只需5行代码即可完成！
我只是想使“ selected”类一次只能用于一个按钮-而是可以在单个按钮上切换，但是我不知道如何使用当前的selectButton（）单击来管理所有按钮的状态。处理程序。目前，我只能访问被单击的按钮的状态。
任何帮助将不胜感激！谢谢。
您想要处理来自父（主）组件的所有状态。主状态下的每个Button项都应包含isActive并且只能在主组件中进行更改。子组件应该是“哑”的，并且不知道状态或不能更改状态。如果将子组件的功能传递给onChangeprop来调用它，它将在主组件中触发该函数并更改其状态。在下面找到一个起点，以做您想要的事情。
主要组成部分：
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
var classNames = require('classnames');
import classnames from 'classnames';
import Fans from './Buttons'
export default class Main extends React.Component {
constructor(props) {
super(props);
this.state = {
Buttons:[
{ src: '/src/images/1.svg',
button: 1,
isActive: false
},
{ src: '/src/images/2.svg',
button: 2,
isActive: false
},
{
src: '/src/images/3.svg',
button: 3,
isActive: fasle
}
]
}
}
changeActive(index) {
var buttonArray = this.state.Buttons;
for (var i = 0; i < Buttons.length; i++) {
let active = !buttonArray[i].isActive;
if (index - 1 === index) {
buttonArray[i].isActive = active;
} else {
buttonArray[i].isActive = false;
}
}
this.setState({Buttons : buttonArray});
}
render() {
var buttons = this.state.Buttons.map(function(button){
return(<Buttons key={button.button}
buttNum={button.button}
src={button.src},
changeActive={this.changeActive}
/>);
})
return (
<div>
{buttons}
</div>
);
}
};
按钮组件：
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import classnames from 'classnames';
var classNames = require('classnames');
export default class Buttons extends React.Component {
constructor(props) {
super(props);
this.state = {isActive: false}
this.selectButton = this.selectButton.bind(this)
}
selectButton() {
this.props.changeActive(this.props.buttNum);
}
render() {
let classes = classnames('btn-success', {selected: this.state.isActive});
return (
<img src={this.props.src}
buttNum={this.props.key}
onClick={this.selectButton}
className={classes} />
);
}
};
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句