SoFunction
Updated on 2025-04-11

React's input dynamic value acquisition and assignment method

react input dynamically takes values ​​and assigns

Requirements: Extract the value entered by the user in the form form and change the data in setState

1. Set initial value in constructor

2. Define in the Input box

If there is only value and no onChange event, an error will be reported. The change event can be associated with the input value

value = {}
onChange ={(this) }

3. Register the onchange event, then get the Input value and assign the state value.



The name corresponding to the Input box you are currently entering, such as email, password




Represents the value currently entered


 
    ({
      [] : 
    })


import React, { Component } from 'react'
class Register extends Component {
  // Set state in the constructor  constructor(props){
    super(props)
     ={
      name : '',
      email:'',
      password:'',
      password2:'',
      errors:{},//User illegal information prompt    }
  }
  onChange(e){
    // ()
    ()//(Represents that you are currently entering the Name corresponding to the Input box, such as email, password    // represents the value currently entered    ({
      [] : 
    })
  }
 //Submit the corresponding content  onSubmit(e){
    ()
    const newUser = {
      name : ,
      email:,
      password:,
      password2:.password2,
    }
    (newUser)
  } 
  render() {
    return (
      <div className="register">
        {/* {user ?  : null} */}
        <div className="container">
          <div className="row">
            <div className="col-md-8 m-auto">
              <h1 className="display-4 text-center">register</h1>
              <p className="lead text-center">Create a new account</p>
              <form onSubmit={(this)}>
                <div className="form-group">
                  <input
                    type="text"
                    className="form-control form-control-lg"
                    placeholder="username"
                    name="name"
                    value = {}
                    onChange ={(this) }
                  />
                </div>
                <div className="form-group">
                  <input
                    type="email"
                    className='form-control form-control-lg'
                    placeholder="Email Address"
                    name="email"
                    value = {}
                    onChange ={(this) }
                    />
                  <small className="form-text text-muted">We usedgravatarGlobally recognized avatar, If you need avatar display, Please use it ingravatarregister的邮箱</small>
                </div>
                <div className="form-group">
                  <input
                    type="password"
                    className='form-control form-control-lg'
                    placeholder="password"
                    name="password"
                    value = {}
                    onChange ={(this) }
                  />
                </div>
                <div className="form-group">
                  <input type="password"  
                    className='form-control form-control-lg'  
                    placeholder="Confirm Password"  
                    name="password2" 
                    value = {.password2}
                    onChange ={(this) }
                     />
                </div>
                <input type="submit" className="btn btn-info btn-block mt-4" />
              </form>
            </div>
          </div>
        </div>
      </div >
    )
  }
}
export default Register;


react gets the value of the input box


In development, we need to get the value of the input box or judge whether the value of the input box is empty. If it is empty, give a prompt.


First add an onchange event in the input box


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


In inputChange, update the value of reason, reason is the content in the input box


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


Give the button a click event


&lt;Button type="primary" size={'large'} onClick={()=&gt;rebut(reason)}&gt;turn down&lt;/Button&gt;


rebut is to change the value of a certain variable. Here I am modifying the value of rebutTip, and changing from the original none to the block


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


The above reason and rebutTip set the initial value in models at the beginning


 rebutTip:'none',
 reason:''


Summarize


The above is personal experience. I hope you can give you a reference and I hope you can support me more.