Los formularios de entrada múltiple tienen eventos de cambio, por lo que si la optimización permite que varias entradas compartan un evento de cambio.

La siguiente es una demostración en la sintaxis de reacción:

   <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 })
  }

Lo anterior se logra definiendo el atributo de nombre en la etiqueta

El segundo método es la forma más común que uso en Vue. Suponiendo que los parámetros del evento son fijos y desea extender los parámetros pasados, puede hacer esto:

   <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 })
  }

La expresión puede no ser muy clara, pero si la entiendes, ¡creo que será mucho más conveniente para ti en el proyecto!

Supongo que te gusta

Origin blog.csdn.net/m0_57033755/article/details/131959032
Recomendado
Clasificación