如何捕获用户输入并将其发送到服务器？

Question

This may be already answered, but I can't find anything online about capturing user input and submitting the data into a POST request to a server.

I am using Material UI/React/JavaScript to implement this.

<TextField
   id="outlined-email-input"
   label="email name"
   type="email name"
   name="email name"
   autoComplete="email name"
   margin="normal"
   variant="outlined"
   value={this.state.name}
   onChange={this.handleChange('name')}
/>

And I have another dropdown selection box, that allows the user to choose between four inputs.

<FormControl>
                      <InputLabel
                        ref={ref => {
                          this.InputLabelRef = ref;
                        }}
                        htmlFor="outlined-password-selection"
                      >
                        Password
                      </InputLabel>
                      <Select
                        value={this.state.age}
                        onChange={this.handleSubmit}
                        input={
                          <OutlinedInput
                            labelWidth={this.state.labelWidth}
                            name="Password"
                            id="outlined-age-simple"
                          />
                        }
                      >
                        <MenuItem value="BLUE">BLUE</MenuItem>
                        <MenuItem value="PINK">PINK</MenuItem>
                        <MenuItem value="GREEN">GREEN</MenuItem>
                        <MenuItem value="YELLOW">YELLOW</MenuItem>
                      </Select>
                    </FormControl>

Essentially, I want the user to enter their email and select a password, and then use this information in a POST request. To make this simpler, I want to capture user input and just console.log() them. How do I do this?

Answer 1

You could create a controlled Form and attach an onSubmit event handler to the Form. Once the Form is submitted, then in your handler you would have all the Form values and you can trigger the POST request.

Here's a complete and working React example :

 class Form extends React.Component { constructor(props) { super(props); this.state = {} this.handleInputChange = this.handleInputChange.bind(this) this.handleSubmit = this.handleSubmit.bind(this) } handleSubmit(event) { console.log('Form data:', this.state) event.preventDefault() } // Registering and setting Form fields values and names dynamically handleInputChange(event) { const target = event.target const value = target.type === 'checkbox' ? target.checked : target.value const name = target.name this.setState({ [name]: value }) } render() { return ( <form onSubmit={this.handleSubmit}> <label> Email: <input name="email" type="text" value={this.state.email} onChange={this.handleInputChange} /> </label> <br /> <label> Password: <input name="password" type="password" value={this.state.password} onChange={this.handleInputChange} /> </label> <br /> <button type="submit">Submit</button> </form> ) } } ReactDOM.render( <Form />, document.getElementById('container') ) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="container"> <!-- This element's contents will be replaced with your component. --> </div>