Es fácil cuando tenemos opciones individuales como esta:
<select name="phone_type" id="phone_type"> <option value="mobile" selected>Mobile</option> <option value="home">Home</option> <option value="office">Office</option> </select>Pero en mi caso estoy haciendo esto usando un bucle:
phoneTypes = ['Mobile', 'Home', 'Office']; ... <select onChange={(e) => this.handleChangePhonetype(e, index)}> {this.phoneTypes.map((phoneType, index) => { return ( <option key={index} value={phoneType} name="type"> {phoneType} </option>); })} </select>Busqué en Internet pero no pude obtener una respuesta adecuada para React. Quiero que 'Móvil' ya esté seleccionado cuando se cargue la página. No sé cómo hacer esto en React. Por favor, participe.
Aquí está el stackblitz .
Simplemente debe usar el type de cada objeto de teléfono como valor para el elemento select .
Aquí está el stackblitz actualizado.
const PhoneTypes = ['Mobile', 'Home', 'Office']; class Questionnaire extends Component { state = { phones: [{ type: 'Mobile', number: '' }], }; addContact() { this.setState((prevState) => ({ phones: [...prevState.phones, { type: 'Mobile', number: '' }], })); } handleChange({ target: { name, value } }, phoneIndex) { this.setState((prevState) => ({ phones: prevState.phones.map((phone, index) => phoneIndex === index ? { ...phone, [name]: value } : phone ), })); } handleRemove(phoneIndex) { this.setState((prevState) => ({ phones: prevState.phones.filter((_, index) => phoneIndex !== index), })); } handleSubmit(e) { console.log(this.state, '$$$'); } render() { return ( <div> <h1>The Form</h1> <label>Contact</label> {this.state.phones.map((phone, index) => { return ( <div key={index}> <input onChange={(e) => this.handleChange(e, index)} value={phone.number} name="number" /> <select name="type" value={phone.type} onChange={(e) => this.handleChange(e, index)} > {PhoneTypes.map((phoneType, index) => { return ( <option key={index} value={phoneType}> {phoneType} </option> ); })} </select> <button onClick={(e) => this.handleRemove(index)}>Remove </button> </div> ); })} <hr /> <button onClick={(e) => this.addContact(e)}>Add contact</button> <hr /> <button onClick={(e) => this.handleSubmit(e)}>Submit</button> </div> ); } }También arreglé algunos otros problemas como mutar el estado, argumento incorrecto para eliminar la función, etc.