如何捕獲用戶輸入並將其發送到服務器？

Question

可能已經有人回答了，但是我找不到關於捕獲用戶輸入並將數據提交到服務器的POST請求中的任何在線信息。

我正在使用Material UI / React / JavaScript來實現這一點。

<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')}
/>

我還有另一個下拉選擇框，允許用戶在四個輸入之間進行選擇。

<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>

本質上，我希望用戶輸入電子郵件並選擇一個密碼，然后在POST請求中使用此信息。 為了簡化此過程，我想捕獲用戶輸入，然后只對它們進行console.log（）。 我該怎么做呢？

Answer 1

您可以創建一個受控的Form ，並將onSubmit事件處理程序附加到Form。 提交表單后，您將在處理程序中擁有所有表單值，並且可以觸發POST請求。

這是一個完整且有效的React示例 ：

 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>