如何使用React禁用重复列表上的点击按钮

Question

我有一个代码，当点击按钮时禁用它，这是有效的，但它禁用了我在屏幕上的所有按钮。

这是代码的一部分，我使用的是类组件:

constructor(props) {
super(props);
this.state = { isLoading: false };
}


handleFile(file) {
const id = file.id; // maybe I can use this id?

this.setState({ isLoading: true });
if (document.statusCode == 200) {
this.setState({ isLoading: false });
} 
}

_renderButton(text, props) {
const isFile = (props.type.toLowerCase() === 'file');
return (
<Row>
{isFile && (
<Button disabled={this.state.isLoading} onClick={(e) => { e.stopPropagation(); this.handleFile(props)}} />
)}
</Row>
);
}

我如何禁用只是点击按钮使用反应?在这种情况下如何使用地图?

Answer 1

给每个按钮一个id数据属性，并使用状态来注册该按钮是否被点击，如果它在下一次渲染时禁用它。

const { Component } = React;
class Example extends Component {
constructor() {
super();
this.state = {};
this.handleClick = this.handleClick.bind(this);
}
handleClick(e) {
const { id } = e.target.dataset;
this.setState({ ...this.state, [id]: true });
}
createButtons() {
const jsx = [];
for (let i = 0; i < 10; i++) {
const button = <button
data-id={i}
disabled={this.state[i]}
onClick={this.handleClick}
>Click me {i}
</button>;
jsx.push(button);
}
return jsx;
}
render() {
return (
<div>
{this.createButtons()}
</div>
);
}
}
ReactDOM.render(
<Example />,
document.getElementById("react")
);

button:disabled { color: red; opacity: 50%; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>