如何禁用重復列表上的單擊按鈕

Question

我有一個代碼，當點擊它時禁用一個按鈕，這是有效的，但它禁用了我在屏幕上的所有按鈕。

這是代碼的一部分：

  constructor(props) {
    super(props);
    autoBind(this);
    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)}} />
        )}
        {props.deleted ? // some code : // another code }
      </Row>
    );
  }

如何使用反應僅禁用單擊的按鈕？

預先感謝您可以幫助我解決這個問題。

Answer 1

如果您有三個按鈕，您可以像這樣單獨切換它們。

constructor(props) {
    super(props);
    autoBind(this);
    this.state = { isLoading: [false,false,false] };
  }
  
  
  handleFile(file,index) {
    const id = file.id; // Maybe I can use this id

    this.setState({ isLoading: true });
    if (document.statusCode == 200) {
      const newLoading = this.state.isLoading;
      newLoading[index] = true;

      this.setState({ isLoading: newLoading });
    } 
  }


  _renderButton(text, props,index) {
    const isFile = (props.type.toLowerCase() === 'file');
    return (
      <Row>
        {isFile && (
          <Button disabled={this.state.isLoading[index]} onClick={(e) => { e.stopPropagation(); this.handleFile(props)}} />
        )}
        {props.deleted ? // some code : // another code }
      </Row>
    );
  }