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映射。几乎我保存了整个身体，并在我的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的工作方式lol

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是一个），要解决此问题，我将以下内容添加到React中的演示组件：

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

这往往会“刷新” dyn压缩文件，之后它们就可以正常工作了！

如何修复输入复选框需要doubleClick才能'检查'样式（React / JSX）？

1 个答案: