react生成的表单不能键入问题的解决
2017-11-04 09:53
351 查看
刚学react,用react做了一个表单,生成后却发现,input输入不了内容,经百度后,发现react生成的表单如果要重新渲染其中的value应该改变state才会重新渲染,所以要给input绑定onChange事件,具体实现如下所示:
FormItem.js
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> ); } }
相关文章推荐
- android 典型问题:R.java文件不能自动生成的解决办法
- 利用jasperreports报表生成pdf文档中文不能显示问题解决方法
- 在新复制的MFC Visual C++项目中不能自动生成代码问题的解决
- Form:解决,自定义控件重写Text属性时,设计时不能在InitializeComponent中生成代码的问题
- 沫沫金::完美解决jasperreports集成ssh后生成HTML图片红叉叉问题和chart不能显示问题
- js生成二维码,解决微信浏览器不能长按识别二维码问题。
- 解决在Oracle数据库中使用hibernate生成表不能正确创建表的有关问题
- 安卓开发环境的搭建和解决在Eclipse新建安卓5.1工程不能自动生成R文件的问题
- 解决JasperReport生成PDF文件,中文不能显示的问题
- R文件不能生成问题解决办法
- android 典型问题:R.java文件不能自动生成的解决办法
- 解决jsp或serverlet 不能解析multipart/form-data 类型的表单域的问题 --http://ckasj.vicp.net/blog/index.php/archives/236
- 解决Microsoft Visual Studio F6不能重新生成解决方案问题,附图文。
- 解决打包生成JAR在Android项目中不能调用问题
- JQueryUI dialog控件不响应服务端事件问题解决,dialog不能提交表单
- Flex 找不到html文件,不能自动生成html问题解决
- 解决 react-router / react-router-dom v4 history不能访问的问题
- 解决IE7不能自动完成表单的问题
- 解决在Oracle数据库中使用hibernate生成表不能正确创建表的问题
- 关于文本域不能在form表单或table不能使用问题,现在用样式解决