Question

我从服务器获取一些数据以填充项目列表，并且每个项目都有一个绑定到项目ID的onClick事件，这会更改要在单击时禁用的UI。

我的问题是在第一次点击时UI完全禁用，但当我继续点击下一项时，它会重置第一项，因此只有一个按钮被禁用一时间如何制作它以便我可以禁用我想要的所有项目，而无需重置之前的项目？

这是我的组件：

class Video extends Component {
constructor () {
 super()
  this.state = {
   isDisabled: false
 }
}


handleClick(frag, voted, event){
 event.preventDefault()

 this.setState({
   isDisabled: {
      [frag]: true
   }
 })
}

我在UI中返回的更改已禁用按钮的代码段

 <button onClick={this.handleClick.bind(this, frags.id, frags.voted)} disabled={this.state.isDisabled[frags.id]} className="rating-heart-2">
     <i className="fa fa-heart" aria-hidden="true"></i>
 </button>

我非常感谢所有提示！

Answer 1

当您调用setState时，您似乎会覆盖isDisabled的先前值。

您可以这样做：

handleClick(frag, voted, event){
 event.preventDefault()

 this.setState({
   isDisabled: {
      ...this.state.isDisabled,
      [frag]: true
   }
 })
}

Answer 2

你提供的代码有点令人困惑，因为在jsx中你有this.state.hasRated来禁用按钮，而在handleClick中你有一个isDisabled对象。

我遵循了jsx方法，我将{id} hasRated对象的frag id添加为true，以便在每次单击时禁用一个按钮。

您可以运行以下代码段来查看代码的输出：

＆＃13;

class Example extends React.Component {
  constructor(props) {
    super(props); 
    this.state = {
      frags: [],
      hasRated: {}
    };

    this.handleClick = this.handleClick.bind(this);
  }

  componentDidMount() {
    setTimeout(() => {
      this.setState({
        frags: [{
          id: 1,
          voted: false
        }, {
          id: 2,
          voted: false
        }, {
          id: 3,
          voted: false
        }]
      });
    }, 500);
  }

  handleClick(id, voted) {
    return (event) => {
      this.setState({
        hasRated: {
          ...this.state.hasRated,
          [id]: true
        }
      });
    }
  }

  render() {
    const items = this.state.frags.map(frag => ( <
      button 
      key={frag.id}
      onClick = {
        this.handleClick(frag.id, frag.voted)
      }
      disabled = {
        this.state.hasRated[frag.id]
      }
      className = "rating-heart-2" >
      Button <
      /button>
    ));

    return (
      <div>
        {items}
      </div>
    );
  }
}

ReactDOM.render( < Example / > , document.getElementById('container'));

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<div id="container"></div>

＆＃13;

ReactJS - 为动态生成的项设置唯一状态

2 个答案: