reactjs選擇基於道具

工作在一個簡單的網絡應用程序的無線電輸入。用戶點擊編輯按鈕，編輯區域充滿數據。我可以預先填寫輸入文字，但我無法檢查基於道具的廣播輸入。這是的jsfiddlereactjs選擇基於道具

var data = [{value:15,locName:"A"},{value:30,locName:"B"}]; 
//Radiogroup component 
var RadioElement = React.createClass({ 
    handleClick:function(){ 
     this.props.handleClick(); 
    }, 
    render:function(){ 
     return (
      <div> 
       <input type="radio" name={this.props.group} value={this.props.radioAttr.value} 
         defaultChecked={this.props.radioAttr.checked} 
         onClick={this.handleClick} 
         /> 
       {this.props.radioAttr.label} 
      </div> 
     );  
    } 
}); 

var RadioSet = React.createClass({  
    render: function() {  
     var radioElements = []; 
     this.props.radios.forEach(function (r) {  
      radioElements.push(<RadioElement group={this.props.group} radioAttr={r} 
              handleClick={this.props.handleClick} 
              />); 
     }.bind(this));   
     return (
      <div>{radioElements}</div>   
     ); 
    } 
}); 
// 

var LocRow = React.createClass({ 
    handleClick:function(){   
     this.props.handleEditClick(this.props.location); 
    }, 
    render:function(){ 
    return (
     <tr> 
     <td>{this.props.location.locName}</td> 
     <td>{this.props.location.value}</td> 
     <td><button onClick={this.handleClick}>Edit</button></td> 
     </tr> 
    ) 
    } 
}); 
var LocTable = React.createClass({ 
    render:function(){ 
    var locRows = []; 
    this.props.locs.forEach(function(loc){ 
     locRows.push(<LocRow location={loc} handleEditClick={this.props.handleEditClick}/>) 
    }.bind(this)); 
    return (
     <div> 
     <table> 
      {locRows} 
     </table> 
     </div> 
    ); 
    } 
}); 
var EditName = React.createClass({ 
    handleChange:function() { 
     var modLoc = this.props.loc; 
    modLoc.locName = React.findDOMNode(this.refs.locRef).value; 
    this.props.handleDataChange(modLoc); 
    }, 
    render:function(){ 
    return (  
     <input type="text" value={this.props.loc.locName} ref="locRef" onChange={this.handleChange}/> 
    ); 
    } 
}); 

var LocValueEdit = React.createClass({ 
    handleRadioClick:function(){ 

    }, 
    render: function() { 
     var locValueOptions = [ 
      { 
       label: "15 M", 
       value: 15, 
       checked: false 
      }, 
      { 
       label: "30 M", 
       value: 30, 
       checked: false 
      }, 
      { 
       label: "60 M", 
       value: 60, 
       checked: false 
      } 
     ]; 

     locValueOptions.forEach(function (c) { 
      if (c.value === this.props.locValue) { 
       c.checked = true; 
      } 
     }.bind(this)); 
     return (

      <div> 
       Delivery is disabled on app before regular hours closes.<br /> 
       <RadioSet group="locValue" 
        radios={locValueOptions} 
        handleClick={this.handleRadioClick} 
        /> 
      </div> 
     ); 
    } 
}); 

var EditLoc = React.createClass({ 
    render:function(){ 
    return (
     <div> 
     <h3>Edit Data</h3> 
     <EditName loc = {this.props.loc} handleDataChange={this.props.handleDataChange}/> 
     <LocValueEdit locValue={this.props.loc.value}/> 
     <button>Update</button> 
     </div> 
    ); 
    } 
}); 

var App = React.createClass({ 
    getInitialState:function(){ 
    return {editingLoc:{locName:"",locValue:0}} 
    }, 
    handleEditClick:function(loc){ 
    this.setState({editingLoc:loc}); 
    }, 
    handleDataChange:function(loc){ 
    alert(loc.locName); 
    }, 
    render: function() { 
    return (
       <div> 
      <LocTable locs={this.props.data} handleEditClick={this.handleEditClick}/> 
        <EditLoc loc = {this.state.editingLoc} handleDataChange={this.handleDataChange}/> 
      </div> 
    ); 
    } 
}); 

ReactDOM.render(
    <App data={data} />, 
    document.getElementById('container') 
);

來源

2016-01-23 shresthaal

使用checked代替defaultChecked道具的複選框元素的鏈接：

<input type="radio" checked={this.props.radioAttr.checked} ...

從陣營docs：

將默認值和defaultChecked道具只在初始渲染過程中使用。如果您需要在後續渲染中更新該值，則需要使用

來源

2016-01-23 20:32:41 madox2

reactjs選擇基於道具

回答

相關問題