[英]reactjs radio button selected is not changed after user click and how to select dropdown option based on the selected edit
working on a simple web app. 在一个简单的Web应用程序上工作。 user clicks on edit button and the edit area is filled with the data. 用户单击“编辑”按钮,编辑区域将填充数据。
issue 1 i can select the radio button based on the selected edit, but i am not able to change the value. 问题1我可以基于所选编辑选择单选按钮,但是我无法更改该值。 issue 2 for the dropdown i can change the selected option but i am not able to set the option when the edit is clicked 下拉菜单的问题2,我可以更改所选的选项,但是单击编辑后我无法设置该选项
https://jsfiddle.net/aas312/wn7jLyj5/1/ 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')
);
At first, I would suggest you to simplify your component hierarchy, because right now there are too many components, which creates mess. 首先,我建议您简化组件层次结构,因为现在组件太多,会造成混乱。 Decomposition is the key concept when it comes to creating hierarchy, but one should not overdo it. 在创建层次结构时,分解是关键概念,但不要过度使用它。 Secondly, you should have a look at Flux, which will stop handing your props over many intermediate components, which don't need these props at all. 其次,您应该看一下Flux,它将停止将您的道具移交给很多根本不需要这些道具的中间组件。
Regarding your radio button, I would provide him with onChange callback rather than onClick. 关于您的单选按钮,我将为他提供onChange回调而不是onClick。 Additionally, if you look at the callback called on click event (the method is in LocValueEdit component), it does nothing, and since your radio buttons value is determined by its parents props, you cant expect it to change. 另外,如果您查看在click事件上调用的回调(该方法位于LocValueEdit组件中),则它什么也不做,并且由于您的单选按钮值由其父项决定,因此您不能期望它会发生变化。 About issue 2, I don't quite understand what you mean. 关于问题2,我不太理解您的意思。
Rethink your design and you will not have such a hardtime finding issues in your code. 重新考虑您的设计,您就不会在代码中遇到麻烦。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.