用于设置任何表单字段状态的通用事件处理程序

时间:2017-03-28 09:36:52

标签: javascript reactjs

这里我们必须编写三个函数来改变表单的所有输入字段的状态,如果我们有更多的字段,例如电话和地址,我们必须再写两个函数来改变那些字段的状态,我想要问是否有任何方法我们只能编写一个通用函数来更改此表单的任何字段的状态,而不是为每个表单字段编写单独的函数?

    public void main() {
      //Declarations
      Dog dogArray = new Dog(); //Could call this just "dog"
      Animal[] animals = new Animal[5]; //"animalsArray" could be a suitable name

      //Populate array
      animals [0] = new Dog();
      animals [1] = new Cat();
      animals [2] = new Wolf();
      animals [3] = new Hippo();
      animals [4] = new Lion();

      //call function which you were trying to declare inside a function 
      checkAnimals(animals, dogArray);
   }

   public void checkAnimals(Animals animals, Dog dogArray) {
     //Loop through array
     for (int i = 0; i < animals.length; i++) { 
        //Process each animal
        animals[i].eat();
        animals[i].makeNoise();
        animals[i].testPolymorphism();

        //Check if current animal is the dog
        if (dogArray.equals(animals[i])) {
          System.out.println("DogArray matches Dog i" + i);
        } else {
          System.out.println("DogArray doesn't match current animal");
        }
     }
   }

2 个答案:

答案 0 :(得分:3)

您可以使用以下模式:

rake db:create

您可以像这样使用handleChange:

handleChange = (type, event) => {
   this.setState({[type]: event.target.value});
}

答案 1 :(得分:0)

还有一种更简洁的使用currying的方式来编写代码:

handleChange = type => event => this.setState({[type]: event.target.value})
<input
   type="text"
   placeholder="Enter Name"
   value={this.state.name}
   id="name"
   onChange={this.handleChange('name')}
/>

您甚至可以使用元素的ID属性来避免每次渲染时都实例化新的处理程序(因为this.handleChange('name')将在每次渲染时返回event => this.setState({name: event.target.value})的新实例),并避免重复自己。但是,这不建议使用,因为这意味着您的元素ID必须与状态键匹配。

handleChange = event => this.setState({[event.target.id]: event.target.value})
<input
   type="text"
   placeholder="Enter Name"
   value={this.state.name}
   id="name"
   onChange={this.handleChange}
/>