React之input動(dòng)態(tài)取值和賦值方式

更新時(shí)間：2023年05月11日 10:48:10 作者：周家大小姐.

這篇文章主要介紹了React之input動(dòng)態(tài)取值和賦值方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

react input動(dòng)態(tài)取值和賦值

需求：對(duì)用戶在form表單輸入的值提取出來(lái),并且改變setState中的數(shù)據(jù)

1.在constructor中設(shè)置初始值

2.在Input框中定義

如果只有value沒(méi)有onChange事件會(huì)報(bào)錯(cuò),change事件可以關(guān)聯(lián)輸入的值

value = {this.state.name}
onChange ={this.onChange.bind(this) }

3.對(duì)onchange事件注冊(cè),然后獲取Input值再對(duì)state賦值

e.target.name

代表你當(dāng)前輸入Input框?qū)?yīng)的Name,如email,password

e.target.value

代表當(dāng)前輸入的值

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

import React, { Component } from 'react'
class Register extends Component {
  // 在構(gòu)造函數(shù)當(dāng)中設(shè)置狀態(tài)
  constructor(props){
    super(props)
    this.state ={
      name : '',
      email:'',
      password:'',
      password2:'',
      errors:{},//用戶不合法信息提示
    }
  }
  onChange(e){
    // console.log(e.currentTarget.value)
    console.log(e.target.name)//(e.target.name代表你當(dāng)前輸入Input框?qū)?yīng)的Name,如email,password
    // e.target.value 代表當(dāng)前輸入的值
    this.setState({
      [e.target.name] : e.target.value
    })
  }
 //提交對(duì)應(yīng)的內(nèi)容
  onSubmit(e){
    e.preventDefault()
    const newUser = {
      name : this.state.name,
      email:this.state.email,
      password:this.state.password,
      password2:this.state.password2,
    }
    console.log(newUser)
  } 
  render() {
    return (
      <div className="register">
        {/* {user ? user.name : null} */}
        <div className="container">
          <div className="row">
            <div className="col-md-8 m-auto">
              <h1 className="display-4 text-center">注冊(cè)</h1>
              <p className="lead text-center">創(chuàng)建新的賬戶</p>
              <form onSubmit={this.onSubmit.bind(this)}>
                <div className="form-group">
                  <input
                    type="text"
                    className="form-control form-control-lg"
                    placeholder="用戶名"
                    name="name"
                    value = {this.state.name}
                    onChange ={this.onChange.bind(this) }
                  />
                </div>
                <div className="form-group">
                  <input
                    type="email"
                    className='form-control form-control-lg'
                    placeholder="郵箱地址"
                    name="email"
                    value = {this.state.email}
                    onChange ={this.onChange.bind(this) }
                    />
                  <small className="form-text text-muted">我們使用了gravatar全球公認(rèn)頭像, 如果需要有頭像顯示, 請(qǐng)使用在gravatar注冊(cè)的郵箱</small>
                </div>
                <div className="form-group">
                  <input
                    type="password"
                    className='form-control form-control-lg'
                    placeholder="密碼"
                    name="password"
                    value = {this.state.password}
                    onChange ={this.onChange.bind(this) }
                  />
                </div>
                <div className="form-group">
                  <input type="password"  
                    className='form-control form-control-lg'  
                    placeholder="確認(rèn)密碼"  
                    name="password2" 
                    value = {this.state.password2}
                    onChange ={this.onChange.bind(this) }
                     />
                </div>
                <input type="submit" className="btn btn-info btn-block mt-4" />
              </form>
            </div>
          </div>
        </div>
      </div >
    )
  }
}
export default Register;

react獲取input框的值

在開(kāi)發(fā)中，我們比較常見(jiàn)的需要獲取input框的值或者對(duì)input框的值判斷是否為空，空的話給出提示

首先在input框添加一個(gè)onchange事件

<TextArea type="text" ?rows={4} value={reason} onChange={inputChange}/>

inputChange里去更新reason的值，reason是input框里的內(nèi)容

function inputChange(e){
? ? ? ? dispatch({
? ? ? ? ? ? type:'buyBackManage/updateState',
? ? ? ? ? ? payload:{
? ? ? ? ? ? ? ? reason:e.target.value
? ? ? ? ? ? },
? ? ? ? });
? ? }

給按鈕一個(gè)點(diǎn)擊事件

<Button type="primary" size={'large'} onClick={()=>rebut(reason)}>駁回</Button>

rebut是去更改某個(gè)變量的值，我這里是修改rebutTip的值，由原來(lái)的none變成block

function rebut(reason){
? ? ? ? console.log(reason)
? ? ? ? if(reason.length===0)
? ? ? ? {
? ? ? ? ? ? dispatch({
? ? ? ? ? ? ? ? type:'buyBackManage/updateState',
? ? ? ? ? ? ? ? payload:{
? ? ? ? ? ? ? ? ? ? rebutTip:'block'
? ? ? ? ? ? ? ? },
? ? ? ? ? ? });
? ? ? ? }
? ? ? ? console.log('123')
? ? }

上面的reason和rebutTip一開(kāi)始在models中設(shè)定了初始值