ReactJs 向这个按钮添加类

Question

我有一个页面，当每个按钮用户点击它应该表现出装，我这样做有多个按钮class，但有一个问题，它添加加载到所有按钮，但我只需要添加类this按钮（这是不是全部点击！）

你可以在这里看到一个简单的演示

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

我知道所有按钮都使用相同的按钮，state但如何state在单击的按钮上使用更改而不是全部。最佳做法是什么？我应该使用ref吗？还是应该使用多个状态？但是不知道以后这个页面会增加多少个按钮。提供解决方案或技巧的任何想法。

Answer 1

这是单独处理单击事件的动态按钮绑定，甚至添加了 Axios API 调用，以便在 API 响应中您也可以删除该按钮上的加载。

这是一个工作演示

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>