受控组件 - 4 - select 单多选

import React, { PureComponent } from 'react'

export class App extends PureComponent {
	constructor() {
		super()
		this.state = {
			fruit: 'orange',
			fruit2: []
		}
	}

	handleSubmitClick(e) {
		// 1、阻止form的默认行为
		e.preventDefault()
		// 2、获取所有的表单数据，对数据进行组织
		console.log('获取爱好=', this.state)
		// 3、以网络请求的方式，将数据传递给服务器(axios)
	}

	`select 单选`
	handleSelectChange(e) {
		this.setState(
			{ fruit: e.target.value },
			() => {
				console.log('fruit=', this.state.fruit)
			}
		)
	}

	`select 多选`
	handleSelectChange2(e) {
		`数组 = Array.from(伪数组或者可迭代对象)`
		`e.target.selectedOptions：是一个 HTMLCollection 对象，
		 包含所有被选中的 <option> 元素，
		 遍历每个选中的 <option> 元素，提取其 value 属性值（如 "apple"），
		 最终生成类似 ["apple", "banana"] 的数组。`
		const options = Array.from(e.target.selectedOptions)
		const values = options.map(item => item.value)
		this.setState({
			fruit2: values
		})
	
		console.log('多选 - select - values=', values)
	}

	render() {
		const { fruit, fruit2 } = this.state
	
		return (
			<div>
				<form onSubmit={e => this.handleSubmitClick(e)}>
					<div>
						`select - 单选`
						<select value={fruit} onChange={e => this.handleSelectChange(e)}>
							<option value="apple">苹果</option>
							<option value="orange">桔子</option>
							<option value="banana">香蕉</option>
						</select>
					</div>
				
					<div>
						`select - 多选`
						<select multiple value={fruit2} onChange={e => this.handleSelectChange2(e)}>
							<option value="apple">苹果</option>
							<option value="orange">桔子</option>
							<option value="banana">香蕉</option>
						</select>
					</div>
				
					<div>
						<button type="submit">提交</button>
					</div>
				</form>
			</div>
		)
	}
}

export default App