多个input表单 并且都有change事件,那么如果优化让多个input共享一个change事件。

以下是react语法中的demo:

   <div>
          <select name="lesson" value={this.state.lesson} onChange={ this.handlerChange }>
            <option value={1}>1阶段</option>
            <option value={2}>2阶段</option>
            <option value={3}>3阶段</option>
          </select> --- { this.state.lesson }
        </div>
        <div>
          <textarea name='note' value={ this.state.note } onChange = { this.handlerChange }></textarea>
        </div>
state = {
    lesson: 1,
    note: '',
  }
 handlerChange = (event) => {
    console.log(event.target.name)
    this.setState({ [event.target.name]: event.target.value })
  }

以上是通过在标签上定义name属性 来实现的

第二个方法是我在vue中最常用的方式,假设事件参数是固定的想要扩展传别的参数,就可以这样弄:

   <div>
          <select value={this.state.lesson} onChange={ (e)=>this.handlerChange(e,"lesson") }>
            <option value={1}>1阶段</option>
            <option value={2}>2阶段</option>
            <option value={3}>3阶段</option>
          </select> --- { this.state.lesson }
        </div>
        <div>
          <textarea value={ this.state.note } onChange = {(e)=>this.handlerChange(e,"note") }></textarea>
        </div>
 handlerChange = (event,type) => {
    console.log(type)
    this.setState({ [type]: event.target.value })
  }

可能表达的不是很清晰,但凡你如果听懂了,相信在项目中你会方便很多!

猜你喜欢

转载自blog.csdn.net/m0_57033755/article/details/131959032