剛學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> ); } }