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

来源：互联网发布：steam古墓丽影在mac 编辑：程序博客网时间：2024/05/30 19:33

刚学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>        );    }}

阅读全文

0 0