react生成的表单不能键入

刚学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>
        );
    }
}
时间: 2024-08-03 19:12:49

react生成的表单不能键入的相关文章

连续12天的加班工作总结-根据客户选择来生成后续表单页面

今天终于不加班了!!!让我先撒花 高呼万岁!! 其实 这样的加班工作 有的时候真的挺没有效率的 有几次晚上 我是真的真的 感觉很累了 但是想到项目的进度 我还是默默的抓紧赶 由于有保密问题 没有代码 就谈谈遇到的问题 主要是两个需求的改变,为某行的app的 travel insurance 模块增加一个新功能 CR1 就是当用户购买保险的时候增加帮 friend or parent 购买  首先通过不同的customer 的类型 来显示是 是给 friend 购买还是 parent购买 然后出现

Yii 通过widget小物件生成添加表单

通过widget小物件创建添加商品的表单 视图里,表单以endWidget();?>结束 最终效果: 把表单提交过来的信息保存到数据库中去. 补充要点: 密码表单: <?php echo $form->passwordField(模型对象,’字段’); 单选表单: <?php echo $form->radioButtonList($user_model,'user_sex',$sex,array('separator'=>'&nbsp','labelOptio

MVC动态生成的表单:表单元素比较多 你就这样写

MVC动态生成的表单:表单元素比较多 你就这样写: public ActionResult ShoudaanActionResult(FormCollection from,T_UserM user) { List<string> daan = new List<string>(); for (int i = 4; i < from.Count; i++) { daan.Add(from[i].ToString()); } QSAcceptAnswer qaa = new Q

React中的表单应用

React中的表单应用 用户在表单填入的内容,属于用户跟组件的互动,所以不能用this.props读取. var Input = React.createClass({ //初始化组件数据 getInitialState(){ return {value:'hello'}; }, handleChange(event){ this.setState({value:event.target.value}) }, render(){ var value = this.state.value; <di

数据上报-动态生成winform表单

winform+Oracle数据库 通过数据库查询出所有列名.数据类型.描述等信息进行动态生成winform表单文件,再通过发射对类进行取值赋值.........适用于表结构单一,需要快速开发的项目 经理预估期1个星期的工作时间,我也不知道如果真的一个星期做完我会不会挂掉,而实际情况是数据库建立都花了一个星期虽然表名称.数据类型都不需要自己想,从建表模型设计,框架寻找. 1.需要用的类 public class FiledInfo { /// <summary> /// 字段名 /// <

React中reduxForm表单编辑

reduxForm中反写数据在输入框中,数据是从别的模块拉取 .关键代码如下 // 编辑应用表单 class EditCode extends React.Component { constructor(props) { super(props) } componentDidMount() { } // 取消编辑 handleBack=()=>{ window.history.go(-1); } // 确定编辑 handleFormSubmit=()=>{ const { handleSubm

React 之form表单、select、textarea、checkbox使用

1.案例如下 import React from 'react'; /** * 非约束性组(类似defaultValue等属性,不可以程序修改): <input type="text" defaultValue="a" /> 这个 defaultValue 其实就是原生DOM中的 value 属性. 这样写出的来的组件,其value值就是用户输入的内容,React完全不管理输入的过程. 约束性组件(可以修改属性值): <input value={t

react之form表单工具:formik+yup

从网上搜到的form表单解决方案如下: 1.uform,地址:https://uformjs.org/#/MpI2Ij/dNFzFyTb UForm 和核心特性: 基于标准 JSON Schema 协议,数据化构建表单 基于 rxjs 对表单内部的副作用做统一管理,轻松解决各种复杂联动校验场景 支持各种表单布局方案 支持可视化构建表单 支持自定义组件扩展 分布式状态管理,表单性能更高 不足:基于styled-components来开发的,涉及到的自定义样式主要是Form和FormItem层面上的

React中的表单元素

在web应用开发当中,表单还是很重要的元素. 应用表单组件有:文本框(input.textarea).单选按钮和复选框.Select组件. 文本框:文本框的状态改变即文本框中的内容的改变.此时的state应该是inputValue或者是textareaValue.在状态改变时的处理函数应该是 handleInputChange(e){ this.setState({ inputValue:e.target.value }); } 单选按钮和复选框: 1.单选按钮:它的状态state就是radio