[英]How do you capture user inputs and send them to a server?
可能已经有人回答了,但是我找不到关于捕获用户输入并将数据提交到服务器的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()。 我该怎么做呢?
您可以创建一个受控的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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.