您的位置:首页 > Web前端 > React

react生成的表单不能键入问题的解决

2017-11-04 09:53 351 查看
刚学react,用react做了一个表单,生成后却发现,input输入不了内容,经百度后,发现react生成的表单如果要重新渲染其中的value应该改变state才会重新渲染,所以要给input绑定onChange事件,具体实现如下所示:

FormItem.js

class FormItem extends React.Component {
constructor(props) {
super(props);
this.onInputChange = this.onInputChange.bind(this);
this.state = { value: this.props.itemInfo.input.value };
}

onInputChange(e) {
this.setState({ value: e.target.value } );
}

render() {
let {  label, id, input } = this.props.itemInfo,
formId = this.props.formId || null,
help = input.help ? <p className="addAeraHelp">{input.help}</p> : null;
input.type = input.type || 'text';
input.placeholder = input.placeholder || null;
return (
<div className="form-group" id={formId}>
<label for={formId} className="col-sm-2 control-label">{label}</label>
<div className="col-sm-10">
<input type={input.type} className="form-control" id={formId + id} name={input.name || null} placeholder={input.placeholder} value={this.state.value} readOnly={input.readOnly} onChange={this.onInputChange} required />
</div>
{help}
</div>
);
}
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  表单 react
相关文章推荐