React JS，如何禁用映射列表中的单个按钮？

Question

新的反应，我目前有一个基于 api 响应映射的按钮列表，如下所示：

render() { 
  return(
      <div> 
        <h4>User Status:</h4> 
        <div className='buttonContainer'>
        {this.state.data.map((status =>   
            <li key={status.key}>
              <button id={status.key} value = {status.text} onClick={this.nextStep}/>
                {status.text}
              </button>
            </li>
          ))}
        </div>
      </div>
    )      
  }

nextStep 函数将用户状态更改为按下按钮的值（全部基于数据）但是我不希望用户能够多次按下按钮。如何禁用被按下的按钮而不禁用列表中的每个按钮？

Answer 1

只需在您的状态数据数组中添加 isDisabled 标志。就像下面的代码

[{key: 1, text: 'aa', isDisabled: true}, {key: 1, text: 'ab', isDisabled: false}]

在按钮 onClick 事件上更新此 isDisabled 标志，基于此 isDisabled 标志，您可以禁用按钮点击。