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

reactor---元数据驱动的表单

时间:2019-02-08 11:51:47      阅读:206      评论:0      收藏:0      [点我收藏+]

标签:end   bind   驱动   BMI   handle   tar   extends   turn   for   

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---元数据驱动的表单

标签:end   bind   驱动   BMI   handle   tar   extends   turn   for   

原文地址:https://www.cnblogs.com/justart/p/10355994.html

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