react各種表單的寫法
阿新 • • 發佈:2020-12-18
技術標籤:checkboxlog4jfedoravba搜尋引擎
react表單的寫法
import React, { Component } from 'react' export default class two extends Component { state = { value: "123", inputValue: "1234", checkData: [], radioData: "", selectData: "" } // input文字框 handleChange = (e) => { this.setState({ inputValue: e.target.value }) } // 單選框 radioChange = (event) => { console.log(event.target.value) this.setState({ radioData: event.target.value }); } // 多選框 checkChange = (e) => { console.log(e.target.value) let item = e.target.value; let items = this.state.checkData.slice() let index = items.indexOf(item); index === -1 ? items.push(item) : items.splice(index, 1); this.setState({ checkData: items }); console.log(items) } // 下拉列表 SelectChange = (e) => { // 選擇 this.setState({ selectData: e.target.value }) } handleSubmit = (e) => { alert('你提交的內容為' + JSON.stringify(this.state)); e.preventDefault(); // 阻止預設行為,在提交之前需要驗證的時候先攔截一下 } render() { return ( <div> <form onSubmit={this.handleSubmit}> <label>文字框: <input value={this.state.value} onChange={(e) => { this.setState({ value: e.target.value }) }}></input></label><br /> <label>文字框: <input value={this.state.inputValue} onChange={this.handleChange}></input></label><br /> <label>單選框: <input type="radio" name='gender' value="Man" onChange={this.radioChange} />男 <input type="radio" name='gender' value="Men" onChange={this.radioChange} />女</label><br /> <label>愛吃的水果:<input type="checkbox" name="fruit" value="apple" onChange={this.checkChange} />apple</label> <input type="checkbox" name="fruit" value="banana" onChange={this.checkChange} />banana <input type="checkbox" name="fruit" value="pear" onChange={this.checkChange} />pear <label>你喜歡的水果是:</label> <select onChange={this.SelectChange}> <option value="未選擇">請選擇</option> <option value="apple">apple</option> <option value="banana">banana</option> <option value="pear">pear</option> <option value="orange">orange</option> </select> <input type="submit" value="提交" /> </form> </div> ) } }