從一個(gè)簡(jiǎn)單表單談起

假設(shè)我們要做一個(gè)表單，比如是這樣，要怎么做？

你可能會(huì)這樣寫：firstName對(duì)應(yīng)一個(gè)鍵盤記錄，lastName對(duì)應(yīng)一個(gè)鍵盤記錄：

import React from 'react'class Uncontrolled extends React.Component {constructor(props) {super(props)this.state = {firstName: '',lastName: '',}this.handleChangeFirstName = this.handleChangeFirstName.bind(this)this.handleChangeLastName = this.handleChangeLastName.bind(this)this.handleSubmit = this.handleSubmit.bind(this)}handleChangeFirstName({ target }) {this.setState({firstName: target.value,})}handleChangeLastName({ target }) {this.setState({lastName: target.value,})}handleSubmit(e) {e.preventDefault()console.log(`${this.state.firstName} ${this.state.lastName}`)}render() {return (<form onSubmit={this.handleSubmit}><input type="text" onChange={this.handleChangeFirstName} /><input type="text" onChange={this.handleChangeLastName} /><button>Submit</button></form>)}}export default Uncontrolled

但這樣寫的話，復(fù)用性就會(huì)很差，如果我不是2個(gè)表格，而是20個(gè)表格呢？難道要綁定20個(gè)差異不大看起來十分類似的函數(shù)嗎？

事實(shí)上，可以有更好的方案。正如之前看到的，事件對(duì)象的目標(biāo)屬性表示觸發(fā)事件的輸入框。因此，我們可以將輸入框的名稱和值作為變量。handleChange改造成如下形式：

handleChange({ target }) {this.setState({[target.name]: target.value,})}

接著在渲染時(shí)為每個(gè)組件設(shè)置具體名稱：

<input type="text" name="firstName" onChange={this.handleChange} /> <input type="text" name="lastName" onChange={this.handleChange} />

完整代碼如下：

import React from 'react'class Uncontrolled extends React.Component {constructor(props) {super(props)this.state = {firstName: '',lastName: '',}this.handleChange = this.handleChange.bind(this)this.handleSubmit = this.handleSubmit.bind(this)}handleChange({ target }) {this.setState({[target.name]: target.value,})}handleSubmit(e) {e.preventDefault()console.log(`${this.state.firstName} ${this.state.lastName}`)}render() {return (<form onSubmit={this.handleSubmit}><input type="text" name="firstName" onChange={this.handleChange} /><input type="text" name="lastName" onChange={this.handleChange} /><button>Submit</button></form>)}}export default Uncontrolled

為表單設(shè)置默認(rèn)值

但我們之前打開表單的時(shí)候，這個(gè)表單是沒有默認(rèn)值的。如果想要一打開的時(shí)候就添加默認(rèn)值。一種思路是寫成這樣：

<input type="text" defaultValue="Hello React" />

另外，我們還可以給state賦初值的方式來給默認(rèn)值：

import React from 'react'class Controlled extends React.Component {constructor(props) {super(props)this.state = {firstName: 'Dan',lastName: 'Abramov',}this.handleChange = this.handleChange.bind(this)this.handleSubmit = this.handleSubmit.bind(this)}handleChange({ target }) {this.setState({[target.name]: target.value,})}handleSubmit(e) {e.preventDefault()console.log(`${this.state.firstName} ${this.state.lastName}`)}render() {return (<form onSubmit={this.handleSubmit}><inputtype="text"name="firstName"value={this.state.firstName}onChange={this.handleChange}/><inputtype="text"name="lastName"value={this.state.lastName}onChange={this.handleChange}/><button>Submit</button></form>)}}export default Controlled

如果要多次點(diǎn)擊

繼續(xù)進(jìn)一步探討我們希望盡量減少寫重復(fù)代碼的思路。假如這個(gè)表單的Submit按鈕點(diǎn)擊一次和點(diǎn)擊兩次想要觸發(fā)不同的效果呢？我們肯定不想去對(duì)每一種效果寫一種handle函數(shù)，那有什么簡(jiǎn)單一點(diǎn)的方法嗎？

handleEvent(event) {switch (event.type) {case 'click':console.log('clicked')breakcase 'dblclick':console.log('double clicked')breakdefault:console.log('unhandled', event.type)}} <button onClick={this.handleEvent} onDoubleClick={this.handleEvent}>Click me!</button>

這樣就可以實(shí)現(xiàn)我們的需求。

總結(jié)

以上是生活随笔為你收集整理的React简单表单最佳实践的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。