React複選框ajax put request中的布爾值/ Rails

Question

這是我第一次進入React。

我正在使用兩次複選框組件。這是父組件：

var SearchItem = React.createClass({ 
     getInitialState: function(){ 
      return { data: [] }; 
     }, 
     render: function(){ 
      return <div className='searchItem'> 
         <p>{this.props.data.date}</p> 
         <a href={this.props.data.url} target='_blank' {this.props.data.title}</a> 
         <p>{this.props.data.company}</p> 
         <p>{this.props.data.description}</p>  
         <form> 
          <CheckBox value = {this.props.data.saved} id = {this.props.data.id} text = 'Save' /> 
          <CheckBox value = {this.props.data.applied} id = {this.props.data.id} text = 'Applied' /> 
         </form> 
        </div> 
     } 
    }); 

我想在這裏做的就是讓一個ajax放置請求，通過爲保存或應用一個布爾值，根據上下文。這是CheckBox組件：

var CheckBox = React.createClass({ 
     getInitialState: function(){ 
      return { data: [] } 
     }, 
     handleClick: function(e){ 
     $.ajax({ 
       data: // not sure what to do here, 
       dataType: 'json', 
       url: '/searches/' + this.props.id + '.json', 
       type: 'put', 
       context: this, 
       success: function(data, status, xhr){ 
       this.setState({ 
        // not sure what to do here 
       }); 
       }.bind(this), 
       error: function(xhr, status, err){ 
        console.log("whoops, something didn't work:"), 
        console.log(status, err.toString()); 
       }.bind(this) 
      }); 
     }, 
     render: function(){ 
      var value = this.props.value; 
      return (
       <label><input type='checkbox' className='checkBox' defaultChecked={value} onClick={this.handleClick} />{this.props.text}</label> 
      ) 
     } 
    }); 

我想要的數據值，看起來像這樣：{保存：布爾}或{應用：布爾}取決於這是否是保存複選框或應用複選框。

問題：

1）不知道如何動態設置的數據值，這樣我就可以重新使用這個組件。 （'checked'）？這個複選框的布爾技巧'$（'input：checkbox'）。is（'checked'）？ true：false'不起作用，因爲'$（'input：checkbox'）'返回頁面上的每個複選框。

3）我想成功回調中的數據應該是我更新後的模型，我需要抓住我剛更新的任何屬性來設置組件的狀態。對？但是，再次，我需要確定它是哪個複選框。

編輯：

這是CheckBox組件看起來像什麼。

var CheckBox = React.createClass({ 
     getInitialState: function(){ 
      return { data: [] } 
     }, 
     componentDidMount: function(){ 
      this.setState({ 
       checked: this.props.value 
      }); 
     }, 
     handleClick: function(e){ 
      var ajaxData = {} 
      ajaxData[this.props.attribute] = !this.state.checked; 
      $.ajax({ 
       data: ajaxData, 
       dataType: 'json', 
       url: '/searches/' + this.props.id + '.json', 
       type: 'put', 
       context: this, 
       success: function(data, status, xhr){ 
        this.setState({ 
         checked: data[this.props.attribute] 
        }); 
       }.bind(this), 
       error: function(xhr, status, err){ 
        console.log(status, err.toString()); 
       }.bind(this) 
      }); 
     }, 
     render: function(){ 
      return (
       <label><input type='checkbox' checked={this.state.checked} className='checkBox' onClick={this.handleClick} />{this.props.text}</label> 
      ) 
     } 
    }); 

Answer 1

不知道如何動態設置的數據值，這樣我就可以重新使用這個組件。

我會做的是將一個道具添加到Checkbox組件來告訴組件它代表它的屬性。

所以父母會創建Checkbox像

<CheckBox value = {this.props.data.saved} id = {this.props.data.id} text = 'Save' attribute='saved' />

然後在Checkbox你可以做

handleClick: function(e){ 
    var ajaxData = {}; 
    ajaxData[this.props.attribute] = this.state.checked; 
    $.ajax({ 
     data: ajaxData, 
     dataType: 'json', 
     url: '/searches/' + this.props.id + '.json', 
     type: 'put', 
     context: this, 
     success: function(data, status, xhr){ 
     this.setState({ 
      // not sure what to do here 
     }); 
     }.bind(this), 
     error: function(xhr, status, err){ 
      console.log("whoops, something didn't work:"), 
      console.log(status, err.toString()); 
     }.bind(this) 
    }); 
}, 

此複選框布爾絕招 '$（' 輸入：複選框「） .is（'checked'）？ true：false'不起作用，因爲'$（'input：checkbox'）'返回頁面上的每個複選框。

React做到這一點的方法是跟蹤狀態變量中未檢測到的狀態變量來觸發它。特別是如果你想創建一個可重用的組件。

var CheckBox = React.createClass({ 
    getInitialState: function(){ 
     return { data: [] } 
    }, 

    componentDidMount: function() { 
     this.setState({ checked: this.props.value }); 
    }, 

    toggleChecked: function() { 
     this.setState({ checked: !this.state.checked }); 
    }, 

    render: function(){ 
     var value = this.props.value; 
     return (
      <label><input type='checkbox' onChange = {this.toggleChecked} className='checkBox' defaultChecked={value} onClick={this.handleClick} />{this.props.text}</label> 
     ) 
    } 
}); 

小心，我刪除了handleClick只是讓你專注於所做的更改:)。你可以從第一個答案中得到代碼，並把它放在第二個答案中，所有都應該工作。

我想成功回調中的數據應該是我更新的模型，並且我需要抓取我剛剛更新的任何屬性以設置組件的狀態。對？但是，我需要確定它是哪個複選框。

最後，由於您現在在回調中的狀態變量中具有checked屬性，因此您可以簡單地執行this.setState({ checked: response.checked })或您的響應隨附的任何名稱。