ReactJs向此按钮添加类

时间:2019-12-31 06:39:07

标签: javascript reactjs

我在页面上有多个按钮,当用户单击每个按钮时,它应该显示负载,我使用class进行此操作,但是有一个问题,它将负载添加到所有按钮,但是我只需要将类添加到this按钮(并非全部单击!)

您可以看到一个简单的演示 Here

handleClick = (e) => {
    this.setState({
  loading: 'loading'
  })
}

我知道所有按钮都使用相同的state,但如何才能在单击的按钮上使用全部state而不是全部。最佳做法是什么?我应该使用ref吗?还是应该使用多重状态?但我不知道将来会在此页面上添加多少个按钮。提供解决方案或技巧的任何想法。

4 个答案:

答案 0 :(得分:1)

您可以使用handleClick方法轻松获得所选的button。然后切换loading类。这是工作中的demo

const {
  Button
} = semanticUIReact


class App extends React.Component {


handleClick = (e) => {
  // You can use .add or .toggle according to your requirement.
  e.target.classList.toggle('loading');
}

render() {
  return (
    <div>
       <Button className='btn' onClick={this.handleClick}>Button 1</Button>
       <Button className='btn' onClick={this.handleClick}>Button 2</Button>
       <Button className='btn' onClick={this.handleClick}>Button 3</Button>
    </div>
  )
}
}

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

答案 1 :(得分:1)

这里是分别具有处理的单击事件的动态按钮绑定,甚至添加了Axios API调用,以便在API响应中也可以删除该按钮上的负载。

这是工作中的demo

const {
    Button
} = semanticUIReact


class App extends React.Component {

    handleClick = (name) => {
        this.refs[name].ref.classList.add('loading');
        axios.get('https://simonbreiter.com/wp-json/wp/v2/projects?_embed')
            .then(response => {
                setTimeout(() => {
                    this.removeLoading(name)
                }, 3000)
            })
            .catch(error => console.log(error));
    }

    removeLoading = (name) => {
        this.refs[name].ref.classList.remove('loading');
    }

    render() {
        return (
            <div>
                {[...Array(3)].map((data, index) => {
                    const btnIndex = index + 1;
                    return <Button ref={"btn" + btnIndex} className={'btn'} onClick={() => this.handleClick("btn" + btnIndex)}>Button {btnIndex}</Button>
                })}
            </div>
        )
    }
}

ReactDOM.render(<App />, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui-react/0.81.2/semantic-ui-react.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.2/semantic.min.css" />
<script src="https://unpkg.com/axios@0.15.3/dist/axios.min.js"></script>

<div id="app"></div>

答案 2 :(得分:0)

您可以创建一个按钮数组。然后,您可以将所选索引与迭代索引进行比较,并可以应用加载类。

const {
  Button
} = semanticUIReact


class App extends React.Component {

  state = { 
		clickedBtnIndex:-1,
  }
  
  buttons=["Button 1", "Button 2", "Button 3"];

handleClick = (i) => {
	this.setState({
  clickedBtnIndex: i
  })
}

render() {
  return (
    <div>
       {
        this.buttons.map((btn,i)=>
        	<Button className={'btn ' + (i===this.state.clickedBtnIndex?"loading":"")} onClick={()=>this.handleClick(i)}>
           {btn}
          </Button>
        )
       }
       
    </div>
  )
}
}

ReactDOM.render(<App />, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui-react/0.81.2/semantic-ui-react.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.2/semantic.min.css"/>

<div id="app"></app>

答案 3 :(得分:0)

据我对这个问题的理解,更好的方法是将此类通用组件的状态处理/维护到其自己的组件级别。我根据您提供的代码准备了一个示例。 https://jsfiddle.net/y0cjbodq/

const {
    Button
} = semanticUIReact

class ButtonComp extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: false
        }
        this.handleClick = this.handleClick.bind(this);
    }


    handleClick(e) {
        this.setState({
            loading: !this.state.loading
        });
    }

    render() {
        return (
            <Button className={'btn ' + (this.state.loading ? 'loading' : null)} onClick={this.handleClick}>Button 1</Button>
        )
    }
}

class App extends React.Component {
    // Moved state management to component level
    render() {
        return (
            <div>
                <ButtonComp />
                <ButtonComp />
                <ButtonComp />
            </div>
        )
    }
}

ReactDOM.render(<App />, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui-react/0.81.2/semantic-ui-react.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.2/semantic.min.css"/>

<div id="app"></app>

豫ICP备18024241号-1