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

【问题标题】：How do you capture user inputs and send them to a server?您如何捕获用户输入并将其发送到服务器？
【发布时间】：2018-11-29 20:28:32
【问题描述】：

这可能已经得到解答，但我在网上找不到任何关于捕获用户输入并将数据提交到服务器的 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() 他们。我该怎么做？

【问题讨论】：

像任何表单一样，在提交时创建您的 POST，或者您可以收集输入值并在点击任何内容时创建您的 POST。
@Adrian Markoe，你能检查一下my answer and working example吗？如果您有任何问题，请随时提问。

标签： javascript reactjs material-ui

【解决方案1】：

您可以创建controlled Form 并将onSubmit 事件处理程序附加到表单。提交表单后，在您的处理程序中，您将拥有所有表单值，您可以触发 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>

【讨论】：