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

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')
);

转载于:https://www.cnblogs.com/justart/p/10355994.html