我的形式很大,具有各种形式的元素,从get请求中动态呈现。所有其他类型的表单(例如文本和选择)都可以正常工作,但是复选框不是。
我检查一次后,它只会停留(即使我取消选中),我在这里错过了什么或在这里做错了什么?
这是我当前的相关代码:
class Input extends Component{
render(){
var form;
if (this.props.componentClass=="choice") {
// select form
}
else if (this.props.componentClass=="bool")
form =(<Checkbox id={this.props.controlId} onChange={this.props.onChange}
defaultChecked={this.props.placeholder} >
</Checkbox>);
else
// text form
return (
<div>
<Form inline onSubmit={this.handleSubmit}>
<FormGroup controlId={this.props.controlId}>
<ControlLabel>{this.props.name}</ControlLabel>
{form}
<Panel>
{this.props.description}
</Panel>
<FormControl.Feedback />
</FormGroup>
</Form>
<br/>
</div>
);
}
}
// onChange code (comes from a parent component)
onChange(e){
const form = Object.assign({}, this.state.form);
form[e.target.id] = e.target.value;
this.setState({ form });
console.log('current state: ', this.state);
}
您必须如前所述绑定on Change函数,但您应该使用"检查"而不是" value"。
这是您的示例以这种方式修改:
https://jsfiddle.net/8d3of0e7/3/
class Input extends React.Component{
constructor(props){
super(props)
this.state = {form:{}}
}
render(){
var form;
if (this.props.componentClass=="choice") {
// select form
}else if (this.props.componentClass=="bool"){
form = (
<ReactBootstrap.Checkbox
id={this.props.controlId}
onChange={this.props.onChange.bind(this)}
checked={this.state.form[this.props.controlId]}
defaultChecked={this.props.placeholder} >
</ReactBootstrap.Checkbox>);
}else{
// text form
}
return (
<div>
<ReactBootstrap.Form inline onSubmit={this.handleSubmit}>
<ReactBootstrap.FormGroup controlId={this.props.controlId}>
<ReactBootstrap.ControlLabel>
{this.props.name}
</ReactBootstrap.ControlLabel>
{form}
<ReactBootstrap.Panel>
{this.props.description}
</ReactBootstrap.Panel>
<ReactBootstrap.FormControl.Feedback />
</ReactBootstrap.FormGroup>
</ReactBootstrap.Form>
<br/>
</div>
);
}
componentDidUpdate(){
console.log('current state: ', this.state);
}
}
function onChange(e) {
const form = Object.assign({}, this.state.form);
form[e.target.id] = e.target.checked;
this.setState({ form });
}
ReactDOM.render(
<Input componentClass='bool' controlId='retired'
name='Is retired?' onChange={onChange}/>,
document.getElementById('root')
)
在此示例中,我们的状态将是:状态:{form:{retired:true}}
问题是,您将复选框进行了更改,而无需将其绑定到一个值。因此,初始检查正常工作,因为那是默认检查对您所做的事情,但是一旦实际与之互动,您就不会绑定到它的状态,从而导致反应不会在检查或未经检查的位置中恢复它。