zoukankan      html  css  js  c++  java
  • 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')
    );

  • 相关阅读:
    反转链表 16
    CodeForces 701A Cards
    hdu 1087 Super Jumping! Jumping! Jumping!(动态规划)
    hdu 1241 Oil Deposits(水一发,自我的DFS)
    CodeForces 703B(容斥定理)
    poj 1067 取石子游戏(威佐夫博奕(Wythoff Game))
    ACM 马拦过河卒(动态规划)
    hdu 1005 Number Sequence
    51nod 1170 1770 数数字(数学技巧)
    hdu 2160 母猪的故事(睡前随机水一发)(斐波那契数列)
  • 原文地址:https://www.cnblogs.com/justart/p/10355994.html
Copyright © 2011-2022 走看看