用户单击以及如何根据所选编辑选择下拉选项后，不会更改所选的reactjs单选按钮

Question

在一个简单的Web应用程序上工作。 用户单击“编辑”按钮，编辑区域将填充数据。

问题1我可以基于所选编辑选择单选按钮，但是我无法更改该值。 下拉菜单的问题2，我可以更改所选的选项，但是单击编辑后我无法设置该选项

https://jsfiddle.net/aas312/wn7jLyj5/1/

    var data = [{value:15,locName:"A",delivery:true},{value:30,locName:"B",delivery:false}];
//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}
                       checked={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 EditDelivery = React.createClass({
  handleChange:function(e){
    var userSelectedOption = e.target.value;
    this.setState({ selectedOption: userSelectedOption });
  },
    getInitialState:function(){
        return {selectedOption:"0"}
  },
    render:function(){
    return (
        <select value={this.state.selectedOption} onChange={this.handleChange}>
        <option value="1">Yes</option>
        <option value="0">No</option>
      </select>
    );
  }
});
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} />
        <EditDelivery delivery={this.props.loc.delivery}/>
        <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')
);

Answer 1

首先，我建议您简化组件层次结构，因为现在组件太多，会造成混乱。 在创建层次结构时，分解是关键概念，但不要过度使用它。 其次，您应该看一下Flux，它将停止将您的道具移交给很多根本不需要这些道具的中间组件。

关于您的单选按钮，我将为他提供onChange回调而不是onClick。 另外，如果您查看在click事件上调用的回调（该方法位于LocValueEdit组件中），则它什么也不做，并且由于您的单选按钮值由其父项决定，因此您不能期望它会发生变化。 关于问题2，我不太理解您的意思。

重新考虑您的设计，您就不会在代码中遇到麻烦。