reactjs - 如何修复输入复选框需要双击才能使样式为 'check' ed(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 工作正常，但问题是因为 checked 为“false”，我必须在我的 addRoom 方法中将 x 映射到 body。我几乎保存了整个 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 是一个)，为了解决这个问题，我将以下内容添加到React 中的展示组件:

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

这往往会“刷新”dyn comps，之后它们工作得很好!