1. 程式人生 > >reactor---元數據驅動的表單

reactor---元數據驅動的表單

mode state rop value ets alert onchange tel tar

class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = {
metas:[
{type:"input",prop:"name",label:"name",defaultValue:"jy"}
],
model:{},
value: ‘‘
};
this.state.metas.map((item)=>{
this.state.model[item.prop]=item.defaultValue?item.defaultValue:null;
console.log(this.state);
});
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}

/*handleChange(prop,event) {
console.log("xxxxxxxxxxxxxxxxxxxxxx");
console.log(prop);
this.setState({
model:{
[prop]:event.target.value
}
});
}*/

handleChange(event) {
console.log("xxxxxxxxxxxxxxxxxxxxxx");
console.log(prop);
this.setState({
model:{
[event.target.name]:event.target.value
}
});
}

handleSubmit(event) {
alert(‘A name was submitted: ‘ + this.state.value);
console.log(this.state.model);
event.preventDefault();
}

render() {
var x=this.state.metas.map((item)=>
<label key={item.prop}>
{item.label}
//<input type="input" name={item.prop} value={this.state.model[item.prop]} onChange={(e)=>this.handleChange(item.prop,e)}></input>

<input type="input" name={item.prop} value={this.state.model[item.prop]} onChange={(e)=>this.handleChange(item.prop,e)}></input>
</label>
);
return (
<form onSubmit={this.handleSubmit}>
{x}
<input type="submit" value="Submit" />
</form>
);
}
}

ReactDOM.render(
<NameForm />,
document.getElementById(‘root‘)
);

reactor---元數據驅動的表單