如何修复输入复选框需要 doubleClick 才能“选中”样式（React/JSX）？

Question

我尝试在 StackOverflow 周围搜索，似乎人们在 JQuery 中有这个问题，但在 React 中没有（我使用的是 JSX）。

因此，在 componentWillMount() 中，我几乎对后端进行了 API 调用，从数据库中提取了一堆东西，然后将其映射到 JSX。喜欢

var _this = this;
x = body.map(val =>
    <input type="checkbox" 
     checked={_this.state.roomChecked[val.Room_no]} 
      onChange={(event) => _this.addRoom(event, val.Room_no, _this.state.allPrices[val.Room_no])}/>

到目前为止，这个渲染和 addRoom 工作，但问题是因为检查是'假'，我必须在我的 addRoom 方法中将 x 与 body 映射。我几乎保存了整个身体，并在我的 addRoom 中这样做

addRoom(event, room, priceToAdd){
    event.preventDefault();
    //My Code Here
    x = this.state.savedBody.map(val =>
        <input type="checkbox" 
         checked={_this.state.roomChecked[val.Room_no]} 
          onChange={(event) => _this.addRoom(event, val.Room_no, _this.state.allPrices[val.Room_no])}/>

}

我检查了源代码，当有人单击复选框时，选中的复选框设置为 true，但您必须再次单击它才能显示样式，然后您必须双击以删除样式（复选框中的检查）。

任何人都知道我如何解决这个问题？

编辑：几乎在我的渲染函数中，我像这样返回 x {this.x}，这就是 JSX 的工作原理，哈哈

EDIT2：按要求我的整个 addRoom 代码

addRoom(event, room, priceToAdd){
    var _this = this;
    event.preventDefault();
    var total = 0;
    var x = '';
    if(this.state.roomChecked[room]){
      this.state.roomSelected.splice(this.state.roomSelected.indexOf(room), 1);
      total = this.state.totalPrice - priceToAdd;
      this.state.roomChecked[room] = false;
    }
    else {
      this.state.roomSelected.push(room);
      total = priceToAdd + this.state.totalPrice;
      this.state.roomChecked[room] = true;
    }
    x = this.state.theBody.map(val => 
      <div id="content_room">
        <div id="room_img">
          <Image
            src={require("../images/roomImages/room" + val.Room_no + ".jpg")}
            height={300}
            width={400}
          />
        </div>
        <div id="room_details">
          <h2 id="RoomType">{val.Room_Type}</h2>
          <span id="RoomCapacity">Guest Capacity: <span id="RoomCapacityNum">{val.Capacity}</span></span>
          <p id="RoomDescription">{val.Description}</p>
          <span id="RoomPrice">{_this.state.allPrices[val.Room_no]}<span id="RoomPriceTagline">USD/Night Excluding Tax & Fees</span></span>
          <div>
          <h4>Select</h4>
          <input type="checkbox" defaultChecked={_this.state.roomChecked[val.Room_no]} checked={_this.state.roomChecked[val.Room_no]} onChange={(event) => _this.addRoom(event, val.Room_no, _this.state.allPrices[val.Room_no])}/>
          <span className="checkmark"></span>
          </div> 
        </div>
      </div>
    );
    this.setState({ 
      totalPrice: total,
      rooms: x
    });
  }

Answer 1

这个问题难倒了我一个小时，我遇到了同样的问题，直到我开始研究 mdl-switch 组件的实际生命周期。

我调用了一个事件处理程序，默认情况下，它使用 event.preventDefault() 并删除它并仅在需要为我解决问题时才调用它。

我在某些框架中发现的另一件事是，您需要在动态/脚本组件正确显示之前调用更新（mdl-textarea w/hover 是一个），为了解决这个问题，我将以下内容添加到演示组件在反应中：

componentDidUpdate(){
        try{
            window.componentHandler.upgradeDom();
        } catch (err) {
            console.warn('Attempted upgrade of DOM before ready!');
        }
    }

这往往会“刷新”动态组合，之后它们就可以正常工作了！