码迷,mamicode.com
首页 > 其他好文 > 详细

react生成的表单不能键入

时间:2017-09-26 11:55:17      阅读:126      评论:0      收藏:0      [点我收藏+]

标签:value   style   set   class   inf   不能   ops   utc   required   

刚学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生成的表单不能键入

标签:value   style   set   class   inf   不能   ops   utc   required   

原文地址:http://www.cnblogs.com/katelee/p/7595788.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!